如何正确配置Vue 3.5.x项目以使用装饰器模式？

1. 安装必要依赖 #

先安装装饰器相关的Babel插件及配套依赖：

npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev

2. 配置babel.config.cjs #

修改babel.config.cjs，启用装饰器提案并设置为legacy模式（当前多数装饰器库基于旧提案实现）：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

3. 配置vite.config.ts #

在Vite配置中开启TypeScript装饰器支持，同步编译器选项：

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

export default defineConfig({
  plugins: [vue()],
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        experimentalDecorators: true,
        emitDecoratorMetadata: true
      }
    }
  }
});

4. 配置tsconfig.json #

确保TypeScript配置文件中开启装饰器相关选项：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    // 关键配置项
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

5. 验证装饰器使用 #

在IDBOperations.ts中按规范使用装饰器：

import { DataClass, KeyPath } from '你的装饰器依赖包';

@DataClass()
class DemoEntity {
  @KeyPath()
  id: number;
  content: string;

  constructor(id: number, content: string) {
    this.id = id;
    this.content = content;
  }
}

注意事项 #

• 必须开启legacy: true，否则新版装饰器提案语法会与现有库不兼容
• emitDecoratorMetadata用于支持装饰器的元数据反射功能，部分装饰器依赖此选项
• 确保Babel、Vite与Vue版本匹配，避免依赖冲突

内容的提问来源于stack exchange，提问作者Maifee Ul Asad