【vue】配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境

背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。

1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址；

2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。

       虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。 可以通过修改配置文件，让启动和打包项目时，根据不同的命令，打到预期的效果。

https://blog.csdn.net/qq_20097569/article/details/82492819

       下面，以Vue项目为例，介绍一下解决办法：

一、在启动项目时，需要修改/package.json、/config/dev.env.js和/src/main.js文件

       （1）在/package.json中，为启动命令设置不同的参数

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
}

       （2）在/config/prod.env.js中，通过process.arg获取一个命令数组，并为其配置相应的命令

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
let params = process.argv[4]
let baseUrl = ''
switch(params){
    case '--env=test':
        baseUrl = '"http://a.com"'
        break
    case '--env=prod':
        baseUrl= '"http://b.com"'
        break
      default:
        baseUrl = '"http://c.com"'
}
module.exports = merge(prodEnv,{
    NODE_ENV:'"development"'
    baseUrl:baseUrl
})

     （3） 在/src/main.js中，通过process.env.baseUrl获取/config/dev.env.js文件的baseUrl并将其挂载在Vue的原型上

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = process.env.baseUrl
/*eslint-disable no-new*/
new Vue({
    el:'#app',
    router,
    components:{App},
    template:'<App/>'
})

     在不同接口地址下启动项目的时候，直接用对应的命令npm run dev、npm run dev_test、npm run dev_prod就可以了，再也不用去文件中修改接口地址了。

二、打包项目时，需要修改/config/prod.env.js和/src/main.js文件

       （1）在/config/prod.env.js中，通过process.argv获取一个命令数组，并为其配置相应的接口地址

'use strict'
var buildType = process.arge.slice(2)[0]
var obj = {
    NODE_ENV:'"production"'
}
switch(buildType){
    case 'prod'://生产
      process.env.srconfig = 'prod'
      obj.srconfig = '"prod"'
      break;
    case 'prod_ip'://生产
      process.env.srconfig = 'prod_ip'
      obj.srconfig = '"prod_ip"'
      break;
    case 'dev'://开发
      process.env.srconfig = 'dev'
      obj.srconfig = '"dev"'
      break;
    case 'uat'://测试
      process.env.srconfig = 'uat'
      obj.srconfig = '"uat"'
      break;
    case 'pre'://预上线
      process.env.srconfig = 'pre'
      obj.srconfig = '"pre"'
      break;
    case 'beta'://外网测试
      process.env.srconfig = 'beta'
      obj.srconfig = '"beta"'
    case 'pre'://预上线
      process.env.srconfig = 'pre'
      obj.srconfig = '"pre"'
      break;
    default://默认开发
      process.env.srconfig = ''
      obj.srconfig = '""'
      break;
}
module.exports = obj

    (2)在/src/main.js中，通过process.env.baseUrl获取/config/prod.env.js文件的baseUrl并将其挂载在Vue的原型上

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.prototype.$baseUrl = process.env.baseUrl

/*eslint-disable no-new*/
new Vue({
    el: '#app',
    router,
    components:{App},
    template:'<App>'
})

   或者，在interface.js中配置API相关接口地址：

/*eslint-disable*/
//API接口地址
var baseURL,appId,environment,tpbbLink;
var protocol; //判断是http or https
if(window.location.href.indexOf('https')>-1){
    protocol = 'https://'
}else{
    protocol = 'http://'
}
switch(process.env.srconfig){
    case 'dev'://开发
        baseURL = protocol + 'uattest.com';
        environment = 'test';
        appId = 'wx2d';
        signKey = 'ZYT_Tpp';
    case 'pre'://预上线
        baseURL = protocol + 'pretest.com';
        environment = 'test';
        appId = 'wx2d';
        signKey = 'ZYT_Tpp';
    case 'prod'://生产url
        baseURL = protocol + 'tppension.com';
        environment = 'test';
        appId = 'wx2d';
        signKey = 'ZYT_Tpp'; 
    default://默认开发
        baseURL = protocol + 'uattest.com';
        environment = 'test';
        appId = 'wx2d';
        signKey = 'ZYT_Tpp'; 
}
module.exports = {
    baseURL:baseURL,
    appId: appId,
    environment:  environment,
    signKey: signKey,
    staticURL: staticURL,
}

         这样，在打包不同环境下项目的时候，直接用对应的命令npm run build、npm run build test、npm run build prod就可以了，再也不用去文件中修改接口地址了。

        这样，在启动和打包项目的时候，一条命令直接搞定。

       参考博客：配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境  https://blog.csdn.net/qq_20097569/article/details/82492819