Vite + Vue3 项目中.env.development、.env.production 和 .env.test 等环境配置文件使用详解

在使用 Vite + Vue3 开发项目时，.env.development、.env.production 和 .env.test 是 Vite 提供的环境配置文件，用于定义不同环境下的变量，比如开发、生产和测试环境的配置。以下是具体的使用步骤及场景：

一、环境配置文件的结构和作用

1. 文件名和作用

   • .env：默认全局配置，所有环境都会加载。
   • .env.development：仅开发环境加载。
   • .env.production：仅生产环境加载。
   • .env.test：仅测试环境加载。
     

2. 配置文件格式

   • 每行配置是 键=值 格式。
   • 变量名必须以 VITE_ 开头，确保 Vite 能正确读取。

例如：
.env.development

VITE_API_BASE_URL=http://localhost:3000/api
VITE_DEBUG=true

.env.production

VITE_API_BASE_URL=https://api.example.com
VITE_DEBUG=false

.env.test

VITE_API_BASE_URL=http://test.example.com/api
VITE_DEBUG=false

二、加载环境变量

1. 自动加载

   • Vite 会自动加载 .env 和匹配当前模式（development、production 或 test）的文件。
   • 通过命令行参数指定模式，例如：

     vite --mode development
     vite --mode production
     vite --mode test
     

2. 访问环境变量

   • 在代码中通过 import.meta.env 访问，变量名为 VITE_ 开头的键。
   • 例如：

     console.log(import.meta.env.VITE_API_BASE_URL); // 根据模式不同，输出对应的值
     console.log(import.meta.env.VITE_DEBUG); // 输出 true 或 false
     

三、实际使用场景及代码示例

1. 配置 API 地址

场景描述

开发环境使用本地接口，生产环境使用正式服务器接口，测试环境使用测试服务器接口。

代码示例

1. 创建环境配置文件
   .env.development

   VITE_API_BASE_URL=http://localhost:3000/api
   

   .env.production

   VITE_API_BASE_URL=https://api.example.com
   

   .env.test

   VITE_API_BASE_URL=http://test.example.com/api
   

2. 在项目中读取变量
   在 src/utils/api.js 中定义 API 基础地址：

   export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
   

3. 在代码中使用

   import axios from 'axios';
   import { API_BASE_URL } from './utils/api';
   
   const instance = axios.create({
     baseURL: API_BASE_URL,
     timeout: 10000,
   });
   
   export default instance;
   

4. 根据环境启动项目

   • 开发环境启动：

     vite --mode development
     

   • 生产环境构建：

     vite build --mode production
     

2. 开启调试模式

场景描述

通过 VITE_DEBUG 控制日志输出。

代码示例

1. 配置环境文件
   .env.development

   VITE_DEBUG=true
   

   .env.production

   VITE_DEBUG=false
   

2. 在项目中使用

   const isDebug = import.meta.env.VITE_DEBUG === 'true';
   
   if (isDebug) {
     console.log('Debug Mode Enabled');
   }
   

3. 效果

   • 开发环境：Debug Mode Enabled 会输出到控制台。
   • 生产环境：无日志输出。

3. 动态配置应用标题

场景描述

根据环境动态设置网页标题。

代码示例

1. 配置环境变量
   .env.development

   VITE_APP_TITLE=开发环境 - 我的应用
   

   .env.production

   VITE_APP_TITLE=生产环境 - 我的应用
   

   .env.test

   VITE_APP_TITLE=测试环境 - 我的应用
   

2. 在项目中动态设置标题
   在 src/main.js 或 src/App.vue 中：

   document.title = import.meta.env.VITE_APP_TITLE;
   

3. 效果

   • 启动开发环境后，网页标题显示为 “开发环境 - 我的应用”。
   • 生产环境构建后，标题显示为 “生产环境 - 我的应用”。

四、注意事项

1. 环境变量的作用范围

   • .env 中定义的变量会被所有模式加载。
   • 具体模式的文件会覆盖 .env 的相同变量。

2. 安全性

   • 客户端暴露：环境变量最终会被打包进前端代码，所以不要将敏感信息（如密码、密钥）写入 .env 文件。

3. 新增环境文件时的配置

   • 在 vite.config.js 中通过 define 动态注入：

     import { defineConfig } from 'vite';
     
     export default defineConfig({
       define: {
         'process.env': process.env,
       },
     });
     

通过上述示例，您可以根据不同环境动态加载配置，实现灵活管理项目的行为。