1.可修改配置文件相关
为了方便打包后生产可修改配置文件，用于修改一些可能会变化的接口地址，参数等，可以在staic下添加config.js配置文件：
image.png
配置文件内添加一些打包生产后可以修改的变量，并挂载到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声明会造成配置文件更改无效
然后在项目内，直接通过window.OauthConfig.client_id就可以读取到文件内的client_id，其他变量也是相同的方式获取。
（*如果不挂载到window下，使用export 方式将config导出，然后在其他页面导入，这样的话在打包后，对config修改将不会改变文件内的值，可能是这种方式webpack直接将变量写进了各个文件）
2.项目生产环境与开发环境的接口配置
2-1单接口
在以前的项目中，对于与后台交互只有一个接口的情况下，
开发环境配置代理：
proxyTable: {
'/DataCenter': {
target: 'http://192.168.1.87:18091/', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
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本意是服务器放置前端项目的根目录（/DataCenter）
开发环境遇到/DataCenter开头的地址，nodeJs会代理到192.http://192.168.1.87:18091上的/DataCenter接口下，也就是说无论开发环境还是生产环境
DataCenter都是真实存在的目录，但是按照第二种写法，起初的想法是/DataCenter当一个别名的存在，(oauth项目中,为了区分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
认为这样写遇到不同的DataCenter与DataUser，就会转发到不同端口
的确开发环境下可以实现，但是打包出来后
真实的请求地址会是这样：http://192.168.1.60/DataUser/user/del/
DataUser被当成了真实的路径打包了。这样写其实忽略了rootPath，如果是单接口，将const rootPath ='后台目录'
这样，无论生产还是开发环境都可以对应到真实目录
2-2 多接口情况
按照上述所说，单接口情况下将rootPath写成后台目录，在proxyTable代理时，pathRewrite重写保持 '^/DataCenter': '/DataCenter'，这样开发和生产都可以正确找到规定的目录。
那么假如后台没有主目录呢？或者多接口情况如何处理？
两种情况都可以使用一种办法解决：
http.js
let Header ={
user:'', //接口1
data:'' //接口2
};
// 环境的切换
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;
判断当前环境：
开发环境下：将多个接口指定对应的名称，这个名称应该与代理中的字段相同。
开发环境下：理论上全部写成空' '
*但是多接口情况下，axios.defaults.baseURL只能设置一个，正因为多接口，所以不可能是相同的baseurl,所以解决办法：请求接口多的那一项直接设置为空，请求少的那一项，写上接口全路径：
然后api.js
import { get, post, programHeader} from './http'
...export data接口的相关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
相当于在引用别名的时候，生产环境下将全路径赋予别名，这样就覆盖了只能设置一项的baseUrl,也就请求了不同的接口
注意必须写全路径 http://...,如果不写http，那么无法覆盖，会在原路径后追加链接
相当于axios的baseUrl是baidu.com,
然后请求的时候写get(http://qq.com/manager)，那么实际qq覆盖了百度
一个接口，后台没有根目录也是这样解决，生产环境将别名设置为空即可
