我们的vue代码打包上传到服务器之后，生成一个配置文件，里面可以配置域名或其它什么字段之类的，这样以后换了域名，只修改这个配置文件即可。

第一步：安装generate-asset-webpack-plugin插件

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

第二步：配置webpack.prod.conf.js文件

//让打包的时候输出可配置的文件

const GenerateAssetPlugin = require('generate-

asset-webpack-plugin');

const createServerConfig = function (compilation) {

let cfgJson = { ApiUrl: compilation };

return JSON.stringify(cfgJson);

}

//让打包的时候输入可配置的文件

//这段代码加在plugins:[]中

new GenerateAssetPlugin({

filename: 'serverconfig.json',

fn: (compilation, cb) => {

cb(null, createServerConfig(compilation));

},

extraFiles: []

})

第三步：输入npm run build打包代码 结果如下

1119773-20171117174806046-646203025.png

第四步：以后需要修改域名之类的 在serverconfig.json修改即可

1119773-20171117175058499-476104768.png

获取ApiUrl，在main.js中引入该文件

import axios from 'axios'

import router from './router'

import '../static/config.js'

import $ from 'jquery'

if(process.env.NODE_ENV === 'production' ){

$.ajax({

url: 'serverconfig.json',

async: false,

type: 'get',

dataType: "json",

success: function (rs) {

if (rs.ApiUrl) {

axios.defaults.baseURL = rs.ApiUrl;

}

}

});

}else{//开发环境

axios.defaults.baseURL = g_baseURL;//在static下的config.js获取服务器地址

}

axios.defaults.timeout = 60000;

// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

//http request 拦截器

axios.interceptors.request.use(

config => {

const token = sessionStorage.authorization;

if (token) {

// 这里将token设置到headers中

config.headers.Authorization = token;

//这里主要是为了兼容IE9

var browser = navigator.appName;

var b_version = navigator.appVersion;

if (browser == 'Netscape' && b_version.indexOf(';') < 0) { //火狐

} else {

if (b_version.indexOf(';') < 0) {

return config;

}

var version = b_version.split(";");

var trim_Version = version[1].replace(/[ ]/g, "");

if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {

if (config.url.indexOf('?') > 0) {

config.url = config.url + "&AUTHORIZATION=" + token;

}

else {

config.url = config.url + "?AUTHORIZATION=" + token;

}

}

}

} else {

sessionStorage.removeItem('authorization');

localStorage.clear(); //清空缓存

if (router.currentRoute.name && router.currentRoute.name.toLowerCase() == "login") {

//这里需要排除登陆(或第一次请求获取token)的时候的验证

} else {

return null;

}

}

return config

},

error => {

return Promise.reject(error)

}

);

//http response 拦截器

axios.interceptors.response.use(

response => {

return response;

},

error => {

console.log(error)

if (error.response) {

switch (error.response.status) {

case 401:

//返回 401 清除token信息并跳转到登录页面

sessionStorage.removeItem('authorization');

router.replace({

path: '/login',

//query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

})

case 400:

error.message = '请求错误'

break

case 403:

error.message = '拒绝访问'

break

case 404:

error.message = `请求地址出错: ${error.response.config.url}`

break

case 408:

error.message = '请求超时'

break

case 500:

error.message = '服务器内部错误'

break

case 501:

error.message = '服务未实现'

break

case 502:

error.message = '网关错误'

break

case 503:

error.message = '服务不可用'

break

case 504:

error.message = '网关超时'

break

case 505:

error.message = 'HTTP版本不受支持'

break

default:

error.message = "连接服务器异常";

}

}else{

error.message = "连接服务器失败";

setTimeout(()=>{

sessionStorage.removeItem('authorization');

router.replace({

path: '/login',

//query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

})

},500)

}

return Promise.reject(error.message) // 返回接口返回的错误信息

}

);

export default axios;