Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”

Question

我想使用单个文件获得最简单的 vuejs Hello World 版本。我正在这样设置项目：create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</html>

创建创建./src/main.js:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount("#app")

创建 ./src/App.vue:

<template>
    Hello World
</template>

运行 npm init --yes 在终端后跟 npm install vue@latest，所以 package.json:

{
  "name": "vueintro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.31"
  }
}

转到 http://localhost，我得到一个空白页 inspect/console，并给出错误：Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.。我试过导入 ../node_modules/vue 并使用 importmap 但它们都只是抛出错误。

Answer 1

这在浏览器中不起作用，因为它需要 URL 文件才能导入模块。您需要使用某种 bundler/build 工具，我推荐 https://vitejs.dev/ 或者你可以使用 https://vuejs.org/guide/quick-start.html#without-build-tools ，确保映射到确切的文件 vue.esm-browser.js 而不仅仅是 vue

Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”

Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”

javascript

import

vue.js