我正在尝试使用代码让基本的 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>
但我看到的只是“解析模块说明符“vue”时出错”的错误。相对模块说明符必须以“./”、“../”或“/”开头。当我在 Firefox 上浏览到 localhost:3000 时。我已经研究了几个小时，但当我从 VueJS 页面“入门”复制它时，我不明白为什么它不起作用。我使用过命令“npm run dev”、“npxserve”和“npm run build”，但它们都在 Web 开发人员工具的控制台中返回相同的错误。
对此的任何帮助或指导将不胜感激。
看来您正在使用 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 的浏览器支持此功能。幸运的是，一个shim https://github.com/guybedford/es-module-shims可用于允许在非 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:[email protected] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
