1.可修改配置文件相關(guān)
為了方便打包后生產(chǎn)可修改配置文件，用于修改一些可能會變化的接口地址，參數(shù)等，可以在staic下添加config.js配置文件：
配置文件內(nèi)添加一些打包生產(chǎn)后可以修改的變量，并掛載到window下:
var config = {
redirect_uri: "http://192.168.1.60:8080/",
grant_type: "authorization_code",
client_id: "client_test",
client_secret: "666666",
login_url: 'http://192.168.1.87:18088/oauth/authorize?client_id=client_test&response_type=code&scope=read&redirect_uri=http://192.168.1.60:8080/#/UserManager'
}
window.OauthConfig = config
然后在index.html引入即可
<script type="text/javascript" src="./static/config.js"></script>
*注意staic是相對路徑
*注意 一定要是var聲明，let聲明會造成配置文件更改無效
然后在項目內(nèi)，直接通過window.OauthConfig.client_id就可以讀取到文件內(nèi)的client_id，其他變量也是相同的方式獲取。
（*如果不掛載到window下，使用export 方式將config導(dǎo)出，然后在其他頁面導(dǎo)入，這樣的話在打包后，對config修改將不會改變文件內(nèi)的值，可能是這種方式webpack直接將變量寫進(jìn)了各個文件）
2.項目生產(chǎn)環(huán)境與開發(fā)環(huán)境的接口配置
2-1單接口
在以前的項目中，對于與后臺交互只有一個接口的情況下，
開發(fā)環(huán)境配置代理：
proxyTable: {
'/DataCenter': {
target: 'http://192.168.1.87:18091/', // 接口的域名
// secure: false, // 如果是https接口，需要配置這個參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個參數(shù)配置
pathRewrite: {
'^/DataCenter': '/DataCenter'
}
},
}
然后在api.js寫接口的時候:
const rootPath ='/DataCenter'
export const apiRoleAndPer = params =>post(rootPath + '/role/addProle',params);
切記不可使用下面的書寫方式
const rootPath=''
export const apiRoleAndPer = params => post(rootPath + '/DataCenter/role/addProle' ,params)
rootPath本意是服務(wù)器放置前端項目的根目錄（/DataCenter）
開發(fā)環(huán)境遇到/DataCenter開頭的地址，nodeJs會代理到192.http://192.168.1.87:18091上的/DataCenter接口下，也就是說無論開發(fā)環(huán)境還是生產(chǎn)環(huán)境
DataCenter都是真實存在的目錄，但是按照第二種寫法，起初的想法是/DataCenter當(dāng)一個別名的存在，(oauth項目中,為了區(qū)分8088與8091而隨意寫了DataCenter與/DataUser）
export const apiRoleAndUser = data => post(rootPath + '/DataCenter/role/addUserRole', data);//8088
export const apiUserDel = id => get(rootPath + '/DataUser/user/del/' + id)//8091
認(rèn)為這樣寫遇到不同的DataCenter與DataUser，就會轉(zhuǎn)發(fā)到不同端口
的確開發(fā)環(huán)境下可以實現(xiàn)，但是打包出來后
真實的請求地址會是這樣：http://192.168.1.60/DataUser/user/del/
DataUser被當(dāng)成了真實的路徑打包了。這樣寫其實忽略了rootPath，如果是單接口，將const rootPath ='后臺目錄'
這樣，無論生產(chǎn)還是開發(fā)環(huán)境都可以對應(yīng)到真實目錄
2-2 多接口情況
按照上述所說，單接口情況下將rootPath寫成后臺目錄，在proxyTable代理時，pathRewrite重寫保持 '^/DataCenter': '/DataCenter'，這樣開發(fā)和生產(chǎn)都可以正確找到規(guī)定的目錄。
那么假如后臺沒有主目錄呢？或者多接口情況如何處理？
兩種情況都可以使用一種辦法解決：
http.js
let Header ={
user:'', //接口1
data:'' //接口2
};
// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '';
Header.user = '/DataUser' //8088
Header.data = '/DataCenter'//8091
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://192.168.1.36:9000'
Header.user = 'http://192.168.1.35:9000' //8088
Header.data = ''//8091
}
export let programHeader = Header;
判斷當(dāng)前環(huán)境：
開發(fā)環(huán)境下：將多個接口指定對應(yīng)的名稱，這個名稱應(yīng)該與代理中的字段相同。
開發(fā)環(huán)境下：理論上全部寫成空' '
*但是多接口情況下，axios.defaults.baseURL只能設(shè)置一個，正因為多接口，所以不可能是相同的baseurl,所以解決辦法：請求接口多的那一項直接設(shè)置為空，請求少的那一項，寫上接口全路徑：
然后api.js
import { get, post, programHeader} from './http'
...export data接口的相關(guān)n個接口
export const data=()=>get((programHeader.data+'/list')
export const user=()=>get(programHeader.user+'/manager')
那么真實的請求會是這樣：
data接口: Request URL: http://192.168.1.36:9000/list
user接口: Request URL: http://192.168.1.35:9000/manager
相當(dāng)于在引用別名的時候，生產(chǎn)環(huán)境下將全路徑賦予別名，這樣就覆蓋了只能設(shè)置一項的baseUrl,也就請求了不同的接口
注意必須寫全路徑 http://...,如果不寫http，那么無法覆蓋，會在原路徑后追加鏈接
相當(dāng)于axios的baseUrl是baidu.com,
然后請求的時候?qū)慻et(http://qq.com/manager)，那么實際qq覆蓋了百度
一個接口，后臺沒有根目錄也是這樣解決，生產(chǎn)環(huán)境將別名設(shè)置為空即可
