解析模块说明符“vue”时出错。相关模块说明符必须以“./”、“../”或“/”开头

Question

我正在尝试使用代码

让基本的 VueJS 应用程序正常工作

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3"></script>
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <div id="app"></div>

    <script type="module">
        import { createApp } from 'vue'
        import MyComponent from './my-component.js'

        createApp(MyComponent).mount('#app')
    </script>
</body>
</html>

但是当我在 Firefox 上浏览到 localhost:3000 时，我看到的只是 'Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.' 的错误。我已经做了好几个小时了，但是当我从 VueJS 页面 'getting started' 复制它时，我无法弄清楚为什么它不起作用。我使用了命令 'npm run dev'、'npx serve' 和 'npm run build'，但它们都 return 在 Web 开发人员工具的控制台中出现相同的错误。

如有任何帮助或指导，我们将不胜感激。

Answer 1

您似乎正在使用 Vue 的全局构建，其中所有 API 都暴露在全局 Vue 变量下（您的示例中的第 4 行）。

解决方案 1
删除 vue 的导入行并在 createApp 前加上“Vue”。:

//REMOVED: import { createApp } from 'vue'
import MyComponent from './my-component.js'

Vue.createApp(MyComponent).mount('#app') //NOTE that "Vue." has been added

解决方案 2
另一种解决方案是添加一个 importmap 块。这样，您可以按照 importmap 中指定的方式引用 vue，并从那里解析相应的 url。不幸的是，这（目前）只有 Chromium-based 浏览器支持。幸运的是，shim 允许在 non-Chromium 浏览器上使用 importmap。请参见下面的示例，其中垫片注入 importmap-block 上方。请注意，用于加载 vue 的 script-line 已从 header-block.

中删除

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.4.6/dist/es-module-shims.js"></script>
  <script type="importmap">
    { "imports": { "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" } }
  </script>
  <div id="app">{{ message }}</div>
  <script type="module">
    import { createApp } from 'vue' createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')


  </script>
</body>

</html>

解析模块说明符“vue”时出错。相关模块说明符必须以“./”、“../”或“/”开头

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

vue.js

vuejs3