vite使用环境变量

Vite，一个现代的前端构建工具，允许开发者使用环境变量（也称为配置文件或环境配置）来管理项目的不同环境设置。这有助于保持代码的灵活性，并让部署过程变得更加简单。以下是使用Vite环境变量的基本步骤：

1. **创建环境配置文件**：在项目根目录下创建一个`.env`文件，这是Vite默认支持的环境变量文件。例如，可以有`.env.development`、`.env.production`等，分别对应开发和生产环境。

   // .env.development
   VITE_PORT=8080
   VITE_API_URL=http://localhost:3000/api

2. **加载环境变量**：在Vite的`vite.config.js`配置文件中，通过`import()`函数引入环境文件并解析。Vite会自动读取当前模式下的环境文件（如`.env.${process.env.NODE_ENV}`）。

   import { defineConfig } from 'vite';
   import env from './.env';

   export default defineConfig({
     server: {
       port: env.VITE_PORT,
     },
     base: env.BASE_URL || '',
     proxy: {
       '/api': {
         target: env.VITE_API_URL,
         changeOrigin: true,
       },
     },
   });

3. **处理敏感信息**：对于包含敏感数据的环境变量，比如数据库URL，可以使用`dotenv`库或其他类似工具，在启动Vite之前加载它们，确保这些值不会出现在源码中。

   npm install dotenv

然后在项目入口文件（如`src/main.js`）中导入并使用：

   import dotenv from 'dotenv';
   dotenv.config();

这样，你就可以根据不同环境更改环境变量，无需修改代码。Vite会动态地根据所处的环境提供不同的配置。