Setup
我已经使用初始化了一个新项目vite https://v3.vuejs.org/guide/installation.html#vite在基于 Arch 的操作系统上。
当我尝试从创建简单的计数器时vue docs https://v3.vuejs.org/guide/introduction.html#getting-started，该元素不会呈现。
Code
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="counter">
Counter: {{ counter }}
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import { createApp } from 'vue'
var CounterApp = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
createApp(CounterApp).mount('#counter')
当我检查该元素时，它被注释掉：
Question
这是为什么？以及如何解决该错误？
默认情况下，运行时编译器不包含在 Vue 构建中。
要包含它，请添加以下内容resolve.alias配置：
vite.config.js
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
})
Docs https://vitejs.dev/config/#resolve-alias https://vitejs.dev/config/#resolve-alias
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
