Vue 3 在不使用 App.vue 时使用 Vite 渲染空白页面
Phi*_* F. 8 html javascript vue.js vuejs3 vite
设置
我已经在基于 Arch 的操作系统上使用vite初始化了一个新项目。
当我尝试从vue 文档创建简单计数器时，elemet 不会呈现。
代码
索引.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')
当我检查该元素时，它被注释掉：
问题
这是为什么？以及如何解决该错误？
sch*_*o72 12
默认情况下，运行时编译器不包含在 Vue 构建中。要包含它，请添加以下resolve.alias配置：
vite.config.js
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
})
文档https://vitejs.dev/config/#resolve-alias
- 请注意，这会使应用程序的大小增加约 30%。您对它的完成方式没有错，但最好简单地使用推荐的安装代码，除非有某些特殊原因需要使用运行时编译器。 (2认同)
这样做会取代正常的安装过程，并将根元素视为组件的模板字符串App。由于模板字符串需要运行时编译器，因此您需要使用完整的构建。应该有一个控制台警告。
为了避免在完整构建中增加应用程序的大小（约 30%），建议保持安装点不变，并为组件提供App自己的正确模板：
索引.html
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
应用程序.vue
<template>
<div id="counter">
Counter: {{ counter }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
</script>
| 归档时间： |
|
| 查看次数： |
10171 次 |
| 最近记录： |