vue2项目中配置切换不同的环境

1.创建环境文件

.env.development      # 开发环境
.env.test             # 测试环境
.env.staging          # 预发布环境
.env.production       # 生产环境

文件内容示例 

# .env.development
ENV=development
VUE_APP_BASE_API=http://dev.api.com
VUE_APP_ENV_NAME=开发环境# .env.test
ENV=test
VUE_APP_BASE_API=http://test.api.com
VUE_APP_ENV_NAME=测试环境# .env.production
ENV=production
VUE_APP_BASE_API=https://prod.api.com
VUE_APP_ENV_NAME=生产环境

2.修改packge.json文件

        需要切换不同的环境就直接配置 cross-env NODE_ENV=就行

"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","dev:test": "cross-env NODE_ENV=test webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","build": "node build/build.js"},

        这个地方如果没有安装cross-env需要安装一下 ，cross-env 是一个 Node.js 包，专门用于解决不同操作系统间环境变量设置方式不一致的问题。它允许开发者在 Windows、Linux 和 macOS 上使用相同的命令来设置环境变量，极大地简化了跨平台开发的配置工作

npm i cross-env

3.创建环境加载工具

        在 build 目录下创建 env-loader.js:

const fs = require("fs");
const path = require("path");module.exports = function() {const env = process.env.NODE_ENV || "development";// 构建环境文件路径const envPath = path.resolve(__dirname, `../.env.${env}`); //解析环境文件的绝对路径// 默认环境变量配置const defaultEnv = {NODE_ENV: JSON.stringify(env),VUE_APP_ENV_NAME: JSON.stringify("未知环境")};// 检查环境文件是否存在if (!fs.existsSync(envPath)) {console.warn(`⚠️ 环境文件未找到: ${envPath}`);return defaultEnv;}// 读取环境文件内容const content = fs.readFileSync(envPath, "utf-8");const envConfig = {};content.split("\n").forEach(line => {// 按等号分割键值对，并去除空格const [key, value] = line.split("=");if (key && value) {envConfig[key] = JSON.stringify(value.trim());}});return {...defaultEnv,...envConfig};
};

 4.修改webpack配置

        修改 build/webpack.dev.conf.js:

const env = require('./env-loader')()  // 加载环境配置module.exports = {plugins: [new webpack.DefinePlugin({'process.env': env}),// 其他插件...]
}

        修改 build/webpack.prod.conf.js:

const env = require('./env-loader')()module.exports = {plugins: [new webpack.DefinePlugin({'process.env': env}),// 其他插件...]
}

这些配置好， 应该可以在项目中打印看看了

console.log("当前环境:", process.env.NODE_ENV);