Vue 教程：环境变量与模式管理——区分开发、测试与生产环境

快速概述

在 Vue 项目开发中，环境变量与模式管理用于解决不同环境（开发、测试、生产）下配置差异的问题，例如 API 地址、调试开关等。适用场景包括团队协作、多环境部署和 CI/CD 流程。前置环境要求：Node.js 与 npm 已安装，Vue CLI 3.x 或以上版本（或使用 Vite）。

核心概念与原理

Vue CLI 通过 .env 文件和环境变量控制模式。默认模式有 development（开发）和 production（生产），可通过自定义模式扩展测试环境。环境变量以 VUE_APP_ 前缀暴露给客户端代码，NODE_ENV 决定构建行为。加载机制：启动时读取对应模式的 .env 文件，注入到 process.env。

实战步骤与代码

1. 创建环境变量文件：在项目根目录创建 .env.development 和 .env.production，内容示例：

# .env.development
NODE_ENV=development
VUE_APP_API_URL=https://dev.api.example.com

# .env.production
NODE_ENV=production
VUE_APP_API_URL=https://api.example.com

测试环境可创建 .env.test 并设置 NODE_ENV=test。

2. 在代码中使用环境变量：通过 process.env.VUE_APP_API_URL 访问，例如：

// main.js
const apiUrl = process.env.VUE_APP_API_URL;
console.log('当前环境 API:', apiUrl);

3. 运行与构建命令：

# 开发模式
npm run serve
生产构建
npm run build 

自定义模式时，使用 --mode test 指定。

4. 修改 vue.config.js（可选）：根据 NODE_ENV 调整 Webpack 配置，如开发模式启用 source-map，生产模式优化分包：

// vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'development') { config.devtool = 'source-map'; } else { config.optimization = { splitChunks: { chunks: 'all' } }; } } }; 

常见坑点与优化

• 环境变量不生效：确保变量名以 VUE_APP_ 开头，且修改后重启服务。
• NODE_ENV 误用：不要在 .env 中覆盖 NODE_ENV，除非在自定义模式文件中。
• 测试环境配置：使用 --mode test 时，需确保 .env.test 存在。
• 性能优化：生产构建时启用代码分割与压缩，避免将敏感变量暴露到客户端。

通过合理管理环境变量，可显著提升多环境部署的可靠性与维护效率。