vue在不同的环境打包不同的接口地址

一般有三个环境，一是开发环境，二是测试环境，三是正式环境，每个环境都有一个接口地址。

第一种方法：

开发情况下，我们只要在config/index.js里添加代理就可以，

 proxyTable: {
            '/developPublish': {
                target: 'http://192.168.9.173:8787',
                changeOrigin: true,
                pathRewrite: {
                    '^/developPublish': '/'
                },
            }

或者在config/dev.env.js里(不跨域的情况下开发可用)

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: 'http://192.168.9.173:8787'
})

但是在测试和正式环境下都需要打包，接口地址都会走config/pro.env.js，无法区分这两种环境，所以我们采用不同的打包命令来区分，
首先在 package.json中，加入npm命令

image.png

"build": "node build/build.js",
"test": "node build/build.js",

在prod.env.js中

const target = process.env.npm_lifecycle_event;
if (target == 'test') {
    //测试
    var obj = {
        NODE_ENV: '"production"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'"http://10.99.9.9:8787"',
    }
}else {
    //线上
    var obj = {
        NODE_ENV: '"production"',
        //post用当前域名
        API_ROOT: '""',
        //数据字典
        API_ROOT_DICT:'"http://10.99.9.36:8787/"',
    }
}
module.exports = obj;
/*module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: 'http://10.99.9.9:8787'
}*/

这样npm run build打包的就是正式环境，npm run test打包的就是测试环境。这样就不用每次打包时修改接口域名地址了。

第二种方法：

在config/prod.env.js文件中通过后缀名区分不同的环境，因为prod.env.js定义的常量可以在全局引用，省去了我们再定义全局变量的步骤。

'use strict'
module.exports = {
  NODE_ENV: '"production"',
API_PATH_DEV: “‘http://dev.gomain.com’”,
API_PATH_TEST: “‘http://test.gomain.com:’”,
API_PATH_PROD: “‘http://prod.gomain.com’”
}

在main.js中，引入axios，并根据当前的域名配置axios的baseURL

import axios from 'axios'
if (locatin.hostname === 'localhost') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'dev.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_DEV
} else if (locatin.hostname === 'test.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_TEST
} else if (locatin.hostname === 'prod.gomain.com') {
axios.defaults.baseURL = process.env.API_PATH_PROD
}

配置好axios后，每次执行 npm run build命令都会根据 当前不同的环境而选用不同的域名地址。这样就可以达到只打包一次就能在不同的环境中运行了，

第三种方式

在前端项目里不同环境添加不同的前缀，然后在服务器里根据不同的前缀添加代理。
开发环境：
webpack.dev.conf.js

image.png

生产环境：
webpack.prod.conf.js

image.png
在封装的https.js中
image.png
如果还想添加测试环境或者预生产环境，而且接口地址都不一样的，我们可以根据npm run build添加同样的配置文件。
首先把webpack.prod.conf.js复制一份，重命名webpack.pre.conf.js,同样设置一个BASE_URL，
image.png

然后复制build.js,重命名build_pre.js,修改webpackConfig变量的引入，

image.png
接着复制prod.env.js重命名pre.env.js,
接下来修改package.json
image.png

"build_pre": "node build/build_pre.js"

npm run build_pre打包的就是测试环境或者预生产环境。然后在服务器添加代理，/dev指向192.168.1.3:8787，/publishTest指向192.168.0.33:8787等等。。。