vite3 引入 babel.config.js 文件的配置

在 Vite3 中，你可以通过 `@vitejs/plugin-babel` 插件来引入 Babel 编译器。下面是一个使用 `babel.config.js` 文件的配置示例：

首先，安装 `@vitejs/plugin-babel` 插件：

npm install --save-dev @vitejs/plugin-babel

然后，在 `vite.config.js` 文件中引入插件并添加配置：

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

export default defineConfig({
  plugins: [
    vue(),
    babel({
      babelHelpers: 'bundled',
      configFile: './babel.config.js', // 告诉插件使用 babel.config.js 文件
    }),
  ],
});

在上面的示例中，我们将 `babelHelpers` 设置为 `bundled`，表示使用 `vite` 打包时将所有的 `Babel` helpers 都打包到一个文件中，以减少 `js` 文件的体积。当然，你也可以将其设置为 `runtime`，表示将 helpers 内联到每个模块中。

最后，你需要在项目根目录下创建 `babel.config.js` 文件，用于配置 Babel 编译器。例如：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-typescript',
  ],
};

以上就是在 Vite3 中引入 `babel.config.js` 文件的配置方法。