vue-cli实现多环境运行打包编译

vue-cli实现多环境运行打包编译

• 在开发过程中经常遇到这样的情况，开发或者打包需要去请求后台的不同环境（测试环境，预上线环境，正式环境），虽然可以去改动手动的去改变axios的请求前缀，但是难免会出现忘记更改过来的情况，造成一下不必要的时间浪费，因此，这边文章主要教大家如何配置利用命令行进行不同环境的切换运行。
• 思路：主要是利用了node的process 对象，它是一个全局变量，它提供当前 Node.js 进程的有关信息，以及控制当前 Node.js 进程。process.argv 属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数。第一个元素为process.execPath。如果需要获取argv[0]的值请参见node文档的 process.argv0。第二个元素为当前执行的JavaScript文件路径。剩余的元素为其他命令行参数。那么就可以利用这个参数来对环境请求的地址前缀进行判断配置。

1. 更改package.json文件，提供运行的命令

   • 配置开发运行请求地址，增加下图代码

     
     image.png

代码如下：

    "dev_pro": "webpack-dev-server --inline --progress --env=pro --config  build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config  build/webpack.dev.conf.js",
    "dev_local": "webpack-dev-server --inline --progress --env=local --config  build/webpack.dev.conf.js",
    "build_pro": "node build/build.js --env=pro", // 正式环境
    "build_test": "node build/build.js --env=test", // 测试环境
    "build_local": "node build/build.js --env=local" // 本地环境

2.更改config文件夹中的dev-env.js和prod.env.js，判断请求前缀并赋值，BASE_API 为设置axios请求前缀，是全局变量。

• 更改dev-env.js

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

// -- 增加部分 --//
// dev环境中获取配置的--env=XXX参数
let params = process.argv[4]
let mergeObj = {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
}
switch (params) {
  case "--env=pro":
    mergeObj.BASE_API = '"https://test_pro.com"' // 正式地址前缀
    break;
  case "--env=test":
    mergeObj.BASE_API = '"https://test_test.com"' // 测试地址前缀
    break;
  case "--env=local":
    mergeObj.BASE_API = '"https://test_local.com"' // 本地地址前缀
    break;
  default:
    mergeObj.BASE_API = '"https://test_default.com"' // 默认地址前缀
    break;
}
// 合并到全局环境中
module.exports = merge(prodEnv, mergeObj)
// -- 增加部分 --//

• 更改prod.env.js文件

'use strict'

// -- 增加部分 --//
// dev环境中获取配置的--env=XXX参数
let params = process.argv[2]
let mergeObj = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
}
switch (params) {
  case "--env=pro":
    mergeObj.BASE_API = '"https://test_pro.com"' // 正式地址前缀
    break;
  case "--env=test":
    mergeObj.BASE_API = '"https://test_test.com"' // 测试地址前缀
    break;
  case "--env=local":
    mergeObj.BASE_API = '"https://test_local.com"' // 本地地址前缀
    break;
  default:
    mergeObj.BASE_API = '"https://test_default.com"' // 默认地址前缀
    break;
}
// 合并到全局环境中
module.exports = mergeObj
// -- 增加部分 --//

• 更改完成之后，就可以执行命令行切换不同请求前缀了

 //   开发
    npm run dev        // 默认
    npm run dev_pro    // 默认正式
    npm run dev_test   // 默认测试
    npm run dev_local  // 默认本地
   //    编译
    npm run build      // 默认
    npm run build_pro  // 默认正式
    npm run build_test // 默认测试
    npm run build_local // 默认本地

• 也可以利用idea,直接运行。

  
  image.png