不使用 App.vue 时带有 Vite 的 Vue 3 渲染空白页面答案

【问题标题】：Vue 3 with Vite rendering blank page when not using App.vue不使用 App.vue 时带有 Vite 的 Vue 3 渲染空白页面
【发布时间】：2021-06-02 19:37:58
【问题描述】：

设置

我在基于 Arch 的操作系统上使用 vite 初始化了一个新项目。

当我尝试从 vue docs 创建简单计数器时，元素不呈现。

代码

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')

当我检查它被注释掉的元素时：

问题

这是为什么呢？以及如何解决错误？

【问题讨论】：

标签： javascript html vue.js vuejs3 vite

【解决方案1】：

这样做会替换正常的挂载过程，并将根元素视为App 组件的模板字符串。由于模板字符串需要运行时编译器，因此您需要使用完整的构建。应该有一个控制台警告。

为避免在完整构建中增加应用的大小（约 30%），建议保持安装点不变，并为 App 组件提供自己的适当模板：

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>

【讨论】：

【解决方案2】：

默认情况下，运行时编译器不包含在 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%。你是怎么做的没有错，但是除非有特殊原因使用运行时编译器，否则最好简单地使用推荐的挂载代码。