我在使用vue+vite进行打包时如何让环境变量配置文件打包后还是一个独立文件

在使用vue+vite进行打包时，可以通过使用`@rollup/plugin-replace`插件将环境变量注入到代码中，然后使用`rollup-plugin-uglify`插件对代码进行压缩，最后使用`rollup-plugin-terser`插件再次对代码进行压缩，这样可以确保环境变量配置文件在打包后仍然是一个独立的文件。

具体步骤如下：

1. 安装`@rollup/plugin-replace`插件

npm install --save-dev @rollup/plugin-replace

2. 在`vite.config.js`文件中配置`@rollup/plugin-replace`插件

import replace from '@rollup/plugin-replace';

export default {
  build: {
    rollupOptions: {
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
          'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
        }),
      ],
    },
  },
};

3. 安装`rollup-plugin-uglify`和`rollup-plugin-terser`插件

npm install --save-dev rollup-plugin-uglify rollup-plugin-terser

4. 在`vite.config.js`文件中配置`rollup-plugin-uglify`和`rollup-plugin-terser`插件

import { terser } from 'rollup-plugin-terser';
import { uglify } from 'rollup-plugin-uglify';

export default {
  build: {
    rollupOptions: {
      plugins: [
        replace({
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
          'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
        }),
        uglify(),
        terser(),
      ],
    },
  },
};

这样配置后，在打包时就会将环境变量注入到代码中，并且将代码进行两次压缩，确保环境变量配置文件在打包后仍然是一个独立的文件。