vue项目配置环境变量

配置环境变量

在vue项目中，通过环境变量的配置，通过不同的命令运行不同的运行环境，产出不同的包文件

• 使用NODE_ENV区分本地运行（development），还是打包部署（production）
• 使用VUE_APP_ENV区分本地环境、测试环境、生产环境不同的配置，如果本地运行时的代理地址

运行命令

local代表本地、dev代表开发环境、pro代表生产环境
npm run serve dev // 本地运行测试环境
npm run serve pro // 本地运行生产环境
npm run build pro // 依据生产环境进行打包

vue.config.js配置信息

const envConfig = {
  local: {
    target: 'http://127.0.0.1:8080',
  },
  dev: {
    target: 'http://127.0.0.1:9090',
  },
  pro: {
    target: 'http://www.xxx.com',
  }
}
const currentEnv = envConfig[process.env.VUE_APP_ENV] || envConfig.pro
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: currentEnv.target, // 本地运行代理地址
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },
  },
};

package.json中配置命令

{
  "scripts": {
    "serve": "node ./development.ts",
    "build": "node ./production.ts"
  },
}

配置打包命令production.ts

const spawn = require("cross-spawn");
const writeFile = require("fs").writeFile;
const data = process.argv[2];
writeFile(".env", `VUE_APP_ENV=${data}`, err => {
  if (err) throw err;
  spawn("vue-cli-service", ["build", "--mode", "production"], {
    stdio: "inherit"
  });
});

配置本地运行环境development.ts

const spawn = require("cross-spawn");
const writeFile = require("fs").writeFile;
const data = process.argv[2];
writeFile(".env", `VUE_APP_ENV=${data}`, err => {
  if (err) throw err;
  spawn("vue-cli-service", ["serve", "--mode", "development"], {
    stdio: "inherit"
  });
});