我們的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;

總結

以上是生活随笔為你收集整理的实现打包后修改服务器接口地址,vue打包之后生成一个配置文件修改接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。