Vue 3 with Vite 在不使用 App.vue 时呈现空白页面 [英] Vue 3 with Vite rendering blank page when not using App.vue
问题描述
设置
我已经在基于 Arch 的基础上使用
问题
这是为什么?以及如何解决错误?
这样做取代了正常的安装过程，并将根元素视为 App 组件的模板字符串.由于模板字符串需要运行时编译器，因此您需要使用完整构建.应该有一个控制台警告.
为了避免在完整构建时增加应用的大小(约 30%)，建议保持安装点不变，并为 App 组件提供自己的适当模板:
index.html
<div id="app"></div><脚本类型=模块"src="/src/main.js"></script>main.js
import { createApp } from 'vue'从'./App.vue'导入应用程序createApp(App).mount('#app')App.vue
<div id="计数器">计数器:{{计数器}}</模板>
Setup
I've initialized a new project using vite on an Arch based operating system.
When I try to create the simple counter from the vue docs, the elemet doesn't render.
Code
index.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')
When I inspect the element it is commented out:
Question
Why is that? And how to resolve the error?
Doing that replaces the normal mounting process, and treats the root element like a template string for the App component. Since template strings require the runtime compiler, you would need to use a full build. There should be a console warning about that.
To avoid increasing the size of your app (by ~30%) with the full build, it's recommended to leave the mounting point untouched, and give the App component its own proper template:
index.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')
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>
这篇关于Vue 3 with Vite 在不使用 App.vue 时呈现空白页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
