我正在尝试使用代码让一个基本的 VueJS 应用程序运行
\n<!DOCTYPE html>\n<html>\n<head>\n <script src="https://unpkg.com/vue@3"></script>\n <link rel="icon" href="/favicon.ico" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n</head>\n<body>\n <div id="app"></div>\n\n <script type="module">\n import { createApp } from 'vue'\n import MyComponent from './my-component.js'\n\n createApp(MyComponent).mount('#app')\n </script>\n</body>\n</html>\n但我看到的只是“错误解析模块说明符\xe2\x80\x9cvue\xe2\x80\x9d”的错误。相对模块说明符必须以 \xe2\x80\x9c./\xe2\x80\x9d、\xe2\x80\x9c../\xe2\x80\x9d 或 \xe2\x80\x9c/\xe2\x80\x9d 开头.' 当我在 Firefox 上浏览到 localhost:3000 时。我已经研究了几个小时，但当我从 VueJS 页面“入门”复制它时，我不明白为什么它不起作用。我使用过命令“npm run dev”、“npxserve”和“npm run build”，但它们都在 Web 开发人员工具的控制台中返回相同的错误。
\n对此的任何帮助或指导将不胜感激。
\n看来您正在使用 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 的浏览器支持此功能。幸运的是，有一个垫片可以允许在非 Chromium 浏览器上使用 importmap。请参阅下面的示例，其中填充程序被注入到 importmap 块上方。请注意，用于加载 vue 的脚本行已从标头块中删除。
<!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>
| 归档时间： |
|
| 查看次数： |
2866 次 |
| 最近记录： |