【Vue2 & Vue3】多环境配置（多域名打包）

近期同时接触了多个vue项目，经常在2和3中来回切换，同一种需求的实现方式往往不太一样，这里记录一下面对多域名打包的需求时，2和3分别是如何操作的。

需求描述：

同一套代码私有化部署，要部署在多个服务器上，或者是测试服务器与生产服务器不同，即访问服务接口域名不同，通过配置实现多环境的打包。

Vue2：

整体思路：修改配置文件，通过获取命令行的传参定义不同的全局变量。

1.项目中/config/dev.env.js修改：

新增：HOST: '"dev"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  HOST: '"dev"'
})

2.项目中/config/prod.env.js修改：

获取传递进来的参数：

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';// 这里HOST获取的是命令「npm run build -- test」中传入的参数test
console.log(HOST);

//下面可以根据传入的参数来自定义全局的访问ip，数量多的话可以用switch
let ip = "";
switch (HOST) {
  case 'dev':
    ip = "http://127.0.0.1";
    break;
  case '8':
    ip = "https://888.com";
    break;
  case '27':
    ip = "https://2727.com";
    break;
  case 'test':
    ip = "https://test.com:8443";
    break;
}

//赋给BASE_SERVER_URL，export出去
module.exports = {
  NODE_ENV: '"production"',
  HOST: '"' + HOST + '"',
  BASE_SERVER_URL: '"' + ip + '"'
}

3.在项目中可通过process.env.BASE_SERVER_URL获取ip：

let ip = process.env.BASE_SERVER_URL;
window.sessionStorage.setItem("IP", ip);
console.log("ip=", window.sessionStorage.getItem("IP"));

4.最后敲命令：

npm run build -- test

注意–是2个横杠， 后面跟参数，这样  process.env.HOST 就获取到参数  'test'  了。

 如运行 npm run build -- 27，项目打包ip为https://2727.com

Vue3：

整体思路：在根目录配置.env文件，并且在package.json文件中配置编译命令。

1.在根目录新建.env文件，并设置VUE_APP开头的变量：

如新建.env.test如下：

# 测试环境配置
ENV = 'test'

# 测试环境api
VUE_APP_BASE_API = 'https://test.com'

# 注意该文件中新增的变量都要以 VUE_APP_ 开头！！！

2.在package.json中新建命令，通过 --mode 传入参数：

"scripts": {
    "serve": "vue-cli-service serve",
    //增加下面这行，mode后面接上一步新增的环境文件的名字
    "build:test": "vue-cli-service build --mode test",
  },

3.在项目中可以通过process.env.VUE_APP_xxx获取ip：

let ip = process.env.VUE_APP_BASE_API;
window.sessionStorage.setItem("IP", ip);
console.log("ip=", window.sessionStorage.getItem("IP"));

4.敲命令：

npm run build:test

即可打包出ip为https://test.com的包。

补充说明：

如果前后端部署在同一台服务器上，还可以通过读取url中的域名来拼接后端服务的api地址，示例如下：

在入口文件index.vue的created中：

created(){
    //获取域名
    let url = location.href.split('/')[0]+'//'+location.href.split('/')[2];
    let url1 = url + ':9001';//拼接后端服务端口
    let url2 = url + ':9002';
}