vite react 中使用 decorators

要在 Vite 项目中配置支持装饰器（decorators），你需要安装并配置相应的 Babel 插件。以下是具体步骤：

安装必要的 Babel 插件 ：首先，你需要安装 @babel/plugin-proposal-decorators 和 @babel/plugin-proposal-class-properties 这两个 Babel 插件。打开终端，进入你的 Vite 项目目录，然后运行以下命令：
bash 复制代码
```
yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --dev
```
或者如果你使用 npm，可以运行：
bash 复制代码
```
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties --save-dev
```
配置 Vite 以使用 Babel 插件 ：接下来，你需要在 Vite 配置文件中添加这些插件。通常，Vite 配置文件是 vite.config.js 或 vite.config.ts。在配置文件的 plugins 选项中，添加对 @vitejs/plugin-react 的使用，并在其 babel 配置中指定插件。

例如，在 vite.config.js 中：
javascript 复制代码
```
// 导入必要的依赖
import react from '@vitejs/plugin-react';

// 导出 Vite 配置
export default {
  plugins: [
    react({
      babel: {
        plugins: [
          ['@babel/plugin-proposal-decorators', { legacy: true }],
          ['@babel/plugin-proposal-class-properties', { loose: true }],
        ],
      },
    }),
    // 其他插件...
  ],
  // 其他配置...
};
```
注意，这里我们使用了数组形式来配置插件，并传递了选项对象给每个插件。对于 @babel/plugin-proposal-decorators，我们设置了 legacy: true 来启用旧版装饰器语法（这取决于你的具体需求）。对于 @babel/plugin-proposal-class-properties，我们设置了 loose: true 以获取更宽松的类属性转换。
配置 TypeScript（如果使用） ：如果你的项目使用了 TypeScript，你还需要在 tsconfig.json 文件中启用装饰器的支持。打开 tsconfig.json 并添加或确保有以下配置：
json 复制代码
```
{
  "compilerOptions": {
    "experimentalDecorators": true,
    // 其他配置...
  },
  // 其他配置...
}
```
重启 Vite 开发服务器：配置完成后，你需要重启 Vite 开发服务器以使更改生效。
bash 复制代码
```
yarn dev
```
或者如果你使用 npm：
bash 复制代码
```
npm run dev
```

现在，你的 Vite 项目应该已经配置好了对装饰器的支持。你可以在你的代码中使用装饰器，并且 Vite 将能够正确地处理它们。

请注意，装饰器目前还是 ECMAScript 的一个提案，并未成为标准的一部分。因此，在使用装饰器时，你需要确保你的目标环境（如浏览器或 Node.js）支持你使用的装饰器语法，或者通过构建工具（如 Babel）进行转换。