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);