我們的vue代碼打包上傳到服務(wù)器之后，生成一個(gè)配置文件，里面可以配置域名或其它什么字段之類的，這樣以后換了域名，只修改這個(gè)配置文件即可。

• 安裝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);
}

//讓打包的時(shí)候輸入可配置的文件
//這段代碼加在plugins:[]中
  new GenerateAssetPlugin({
        filename: 'serverconfig.json',
        fn: (compilation, cb) => {
            cb(null, createServerConfig(compilation));
        },
        extraFiles: []
    })

• 輸入npm run build打包代碼 結(jié)果如下

  
  
  image.png

• 以后需要修改域名之類的 在serverconfig.json修改即可

  
  
  image.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{//開發(fā)環(huán)境
    axios.defaults.baseURL = g_baseURL;//在static下的config.js獲取服務(wù)器地址
}

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設(shè)置到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") {
            //這里需要排除登陸(或第一次請(qǐng)求獲取token)的時(shí)候的驗(yàn)證
            } 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信息并跳轉(zhuǎn)到登錄頁(yè)面
                    sessionStorage.removeItem('authorization');
                    router.replace({
                        path: '/login',
                        //query: {redirect: router.currentRoute.fullPath}//登錄成功后跳入瀏覽的當(dāng)前頁(yè)面
                    })
                case 400:
                    error.message = '請(qǐng)求錯(cuò)誤'
                    break
                case 403:
                    error.message = '拒絕訪問(wèn)'
                    break
                case 404:
                    error.message = `請(qǐng)求地址出錯(cuò): ${error.response.config.url}`
                    break
                case 408:
                    error.message = '請(qǐng)求超時(shí)'
                    break
                case 500:
                    error.message = '服務(wù)器內(nèi)部錯(cuò)誤'
                    break
                case 501:
                    error.message = '服務(wù)未實(shí)現(xiàn)'
                    break
                case 502:
                    error.message = '網(wǎng)關(guān)錯(cuò)誤'
                    break
                case 503:
                    error.message = '服務(wù)不可用'
                    break
                case 504:
                    error.message = '網(wǎng)關(guān)超時(shí)'
                    break
                case 505:
                    error.message = 'HTTP版本不受支持'
                    break
                default:
                    error.message = "連接服務(wù)器異常";
            }
        }else{
            error.message = "連接服務(wù)器失敗";
            setTimeout(()=>{
                sessionStorage.removeItem('authorization');
                router.replace({
                    path: '/login',
                    //query: {redirect: router.currentRoute.fullPath}//登錄成功后跳入瀏覽的當(dāng)前頁(yè)面
                })
            },500)
        }
        return Promise.reject(error.message)   // 返回接口返回的錯(cuò)誤信息
    }
);
export default axios;