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

Question

设置

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

当我尝试从vue docs创建简单的计数器时，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')

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

问题

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

Answer 1

这样做会替换正常的挂载过程，并将根元素视为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>

Answer 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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-03-04 15:04:25

解决方案2
0 2021-05-02 09:11:51

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-03-04 15:04:25

解决方案2 0 2021-05-02 09:11:51

解决方案1
2 已采纳 2021-03-04 15:04:25

解决方案2
0 2021-05-02 09:11:51