Vue 3 Options API模板语法无法渲染问题求助

你用npm init vue@latest创建的Vue3项目默认基于Vite构建，且默认使用Runtime-only版本的Vue——这个版本不包含模板编译器，无法直接编译你在组件选项里写的template字符串，所以页面才会空白。

方法一：使用单文件组件（推荐） #

这是Vue官方推荐的开发方式，项目本身也默认支持：

1. 在src目录下创建App.vue文件，内容如下：

<template>
  <div>{{ title }}</div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      title: "My first vue component"
    }
  }
}
</script>

2. 修改main.ts导入该组件：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

方法二：配置Vite使用带编译器的Vue版本 #

如果非要在组件选项里写template字符串，可以修改Vite配置，切换到包含编译器的Vue版本：

1. 项目根目录创建/修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

2. 重启开发服务，原main.ts的代码就能正常渲染。

内容的提问来源于stack exchange，提问作者demiglace