Vite + Vue3 使用lang="ts"时构建报错：Expected ">" but found "setup"

执行vite build时构建失败，报错信息为**"Expected ">" but found "setup""**，即便用Vite+Vue TS项目默认生成的HelloWorld.vue组件也会触发该错误。

示例代码 #

Badge.vue

<!-- Badge.vue -->
<script setup lang="ts">
console.log("help me")
</script>

<template>
Irrelevant
</template>

vite.config.ts

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

export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            input: {
                ["main"]: "src/main.ts",
                ["pages/Badge"]: "src/pages/Badge.vue",
            },
            output: {
                entryFileNames: "[name].mjs",
                chunkFileNames: "[name].mjs",
                assetFileNames: "assets/[name].[ext]",
            }
        }
    }
})

不会触发报错的场景 #

• <script>标签内无任何内容（不含注释）
• 移除lang="ts"属性

调整属性顺序为<script lang="ts" setup>后，报错变为**"Expected ">" but found "lang""**。

解决方案 #

1. 避免直接将.vue文件作为Rollup入口

Rollup默认无法解析Vue的<script setup>语法，需要通过.ts文件作为中转入口：

• 创建src/pages/Badge.ts文件：

// src/pages/Badge.ts
import { createApp } from 'vue'
import Badge from './Badge.vue'

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

• 修改vite.config.ts中的input配置：

input: {
    ["main"]: "src/main.ts",
    ["pages/Badge"]: "src/pages/Badge.ts", // 替换为.ts入口文件
},

2. 确保@vitejs/plugin-vue版本兼容

检查插件版本是否支持Vue 3的<script setup>语法，建议更新到最新稳定版：

npm update @vitejs/plugin-vue

3. 排查类型检查工具冲突

如果项目中使用了vue-tsc等工具，可能存在语法解析冲突，可暂时禁用类型检查验证是否解决问题，或调整工具配置使其正确识别<script setup>语法。

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