Vite + Vue3 错误：预期为“">”，但使用 lang="ts" 时发现“setup”

Question

运行

vite build

时，构建失败并出现错误

Expected ">" but found "setup"

。如果使用默认的

HelloWorld.vue

组件（在示例 Vite + Vue TS 项目中创建），甚至会出现此错误。

<!-- Badge.vue -->

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

<template>
Irrelevant
</template>

// vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            input: {
                ["main"]: "src/main.ts",

                // Add new pages here
                ["pages/Badge"]: "src/pages/Badge.vue",
            },
            output: {
                entryFileNames: "[name].mjs",
                chunkFileNames: "[name].mjs",
                assetFileNames: "assets/[name].[ext]",
            }
        }
    }
})

如果满足以下条件，则不会发生错误：

• <script>

  标签之间没有任何内容（什么都没有，甚至没有评论）

• lang="ts"

  部分被移除

我尝试颠倒

<script>

属性顺序（即

<script lang="ts" setup>

），但这只会给出相同的错误，但颠倒了（

Expected ">" but found "lang"

）

Answer 1

我不知道这是否能解决问题，但首先，

<template>

部分需要一个根元素来包装其内容，因此如果没有单个根元素，您将遇到错误。

template - 顶级元素用作容器 组件模板内容。