webpack+vue-cli2修改部署后的请求路径

在vue日常开发中,本地环境和线上环境的请求接口不同,如果频繁切换,显得不是那么优雅哈,所以,通过webpack的配置,实现不同环境请求不同地址.以下有三种方式,一种是写死地址,打包之后不可修改,另一种是,可根据打包生成的json文件,自由修改地址,第三种是获取当前地址,拼接请求接口.
20190226补充vue-cli3的配置方法，见文章末尾

1. 方法一
   在config文件夹下的dev.env.js文件中这样写:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"http://192.168.x.xxx:8080/idbcenter/"'
})

在config文件夹下的prod.env.js文件中这样写:

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://192.168.x.xxx:8080/idbcenter/"'
}

接下来,在api.js中就根据运行环境做判断

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = process.env.API_ROOT
} else if (process.env.NODE_ENV === 'product') {
  axios.defaults.baseURL = process.env.API_ROOT
}

如果还有测试环境,代码类似.这种方法,在npm run build之后就不可修改地址了,然而在实际开发中,有时ip发生变化的话,需要修改请求地址,那这种方式显然不合适.

2. 方法二
   此方法参考这篇文章
   先安装generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

在webpack.prod.conf.js中这样配置:

//让打包的时候输出可配置的文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://192.168.x.xxx:8080/idbcenter/"};
  return JSON.stringify(cfgJson);
}

//让打包的时候输入可配置的文件   plugins:[]中写以下代码
    new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })

这样npm run build后dist文件夹就生成这些文件:

这个serverconfig.js里就是可修改的域名,将这个json文件也部署到线上,就可以通过axios请求到啦.开发环境的配置,同方法一中在config文件夹下的dev.env.js文件中的写法.在api.js中这样写:

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = process.env.API_ROOT
} else {
  axios.get('serverconfig.json').then((result) => {
    axios.defaults.baseURL = result.data.ApiUrl
  }).catch((error) => { console.log(error) });
}

3. 方法三
   开发环境的配置,同方法一中在config文件夹下的dev.env.js文件中的写法.只要在api.js中这样写:

let protocol = window.location.protocol  //协议
let host = window.location.host   //主机+端口
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = process.env.API_ROOT
} else {
  axios.defaults.baseURL = protocol + '//' +host + '/idbcenter/'
}

4.方法四
以上都是vue-cli2的配置方法，今天在修改之前的vue-cli3搭建的项目时，由于没有config和build文件夹，取而代之的是根目录下的vue.config.js,所以，写法略有不同，原理都是一致的。
此处参考vue-cli官方文档

var GenerateAssetPlugin = require('generate-asset-webpack-plugin'); 
var createServerConfig = function(compilation){
  let cfgJson={ApiUrl:"http://192.168.x.xxx:8080/idbcenter/"};
  return JSON.stringify(cfgJson);
}
module.exports = {
      configureWebpack: {
            plugins: [
                  new GenerateAssetPlugin({
                        filename: 'serverconfig.json',
                        fn: (compilation, cb) => {
                            cb(null, createServerConfig(compilation));
                        },
                        extraFiles: []
                  })
            ]
      },
      outputDir: process.env.outputDir
}