vue-cli 打包相关

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引入即可

*注意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覆盖了百度
一个接口，后台没有根目录也是这样解决，生产环境将别名设置为空即可