Vite/Vue3升级后报需启用装饰器解析插件的内部服务器错误

该报错与tsconfig中配置的experimentalDecorators无关，错误发生在SFC单文件组件解析阶段，是@vitejs/plugin-vue升级到2.x版本后的默认配置变更导致：

• 2.x版本的@vitejs/plugin-vue解析SFC的<script>块时，默认不会自动启用装饰器相关的Babel解析插件
• 项目使用的vue-class-component、vue-property-decorator基于类组件+装饰器语法实现，解析器缺少对应插件时就会抛出语法错误
• 错误日志将问题位置标记在template块是解析堆栈打印偏移导致，实际出错点是组件的script块，并非模板语法问题

按优先级从高到低尝试：

方案1：显式配置Vue插件的装饰器解析规则 #

修改vite.config.js/ts中的@vitejs/plugin-vue配置项，添加script块的Babel解析配置，启用decorators-legacy插件，和现有类组件装饰器的语法模式匹配：

// vite.config.js/ts
plugins: [
  vue({
    template: {
      ssr: true,
      compilerOptions: {
        directiveTransforms: {
          "click-outside": ssrTransformCustomDirective,
          "safe-html": ssrTransformCustomDirective
        }
      }
    },
    // 新增以下配置段
    script: {
      babelParserPlugins: ['decorators-legacy']
    }
  }),
  // 其余插件配置保持不变
  i18nResources({
    path: resolve(__dirname, "./src"),
  }),
  loadVersion(),
  graphQlFile(),
  markdown({ mode: Mode.HTML })
]

修改完成后清空依赖缓存、重启Vite开发服务即可，这是改动量最小的适配方案。

方案2：清理依赖版本冲突 #

如果方案1配置后仍报错，按以下步骤排查依赖问题：

• 删除项目下的lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml）和node_modules目录
• 确认没有手动安装@vue/compiler-sfc依赖，2.x版本的@vitejs/plugin-vue已经内置了版本匹配的compiler-sfc，手动安装会触发版本冲突
• 重新执行依赖安装命令，安装完成后用vite --force强制清空预构建缓存启动服务

方案3：适配第三方插件的解析配置 #

项目中使用的vite-plugin-markdown@2.0.2内部自带Babel解析逻辑，默认未开启装饰器支持，如果报错出现在markdown文件引入的Vue组件片段中，需要给该插件补充对应的parser配置，或升级到兼容Vite2.9.x的版本。

配置修改完成后依次验证：

• 执行npx vite --force启动开发服务，访问之前报错的Tooltip、Dropdown组件对应页面，确认控制台无解析错误
• 执行npx vite build验证生产构建流程可以正常完成

补充说明：tsconfig中的experimentalDecorators是TypeScript编译器的读取配置，Vite开发和构建阶段转译代码使用esbuild/Babel，不会读取该配置，因此单独开启tsconfig的装饰器配置无法解决构建层的语法解析问题。

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