vue-配置外部網址變量--避免重複打包

此文檔主要爲4步代碼組成

通過這篇博文你能學到：

one：怎麼配置外部變量避免重複打包，

two：生產環境和開發環境共用一個接口文件，不用創建三個文件index.js，index_dev.js，index_pro.js

three：開發環境跨域配置

開始：

1.index.html，引入外部變量配置文件（paramConfig.js）,此文件在第二步會創建

<script src="/static/paramConfig.js"></script>

2.static目錄放創建外部變量配置文件，爲什麼是static目錄呢？因爲這個目錄的資源不會被打包，保持原態

window.paramConfig = {
	"api": "網址1",
	"examapi": "網址2",
	"recuiteapi": "網址3"
};

3.src目錄下面創建config目錄，放置axios接口配置文檔index.js，

代碼解釋：

first part：import部分不管，各有作用；就是引入要用到的各種包和自己的文件

second part：判斷環境變量，開發環境需要proxy跨域，生產環境的接口地址爲第二步定義的相關地址

third part：axios相關的一些配置，詳情請參考axios官網http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

fourth part：導出vue頁面的js要引用的一些接口

部分代碼如下

import Axios from 'axios'
import Qs from 'qs'
import md5 from 'js-md5';
import abbr from '@api/abbr'
import store from '../store'
//baseApi    examBaseApi    recuiteBaseApi
let baseApi, examBaseApi, recuiteBaseApi;
let curEnv = process.env.NODE_ENV;
if(curEnv === 'development'){
	baseApi = '/api';
	examBaseApi = '/examapi';
	recuiteBaseApi = '/recuiteapi';
}else{
	baseApi = paramConfig.api;
	examBaseApi = paramConfig.examapi;
	recuiteBaseApi = paramConfig.recuiteapi;
}

var instance = Axios.create({
	headers: {
		'content-type': 'application/x-www-form-urlencoded',
		'Access-Control-Allow-Origin': '*',
		'Access-Control-Allow-Credentials': true
	}
});
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
    // 在發送請求之前做些什麼
    return config;
}, function (error) {
	// 對請求錯誤做些什麼
	return Promise.reject(error);
});

// 添加響應攔截器
instance.interceptors.response.use(function (response) {
    // 對響應數據做點什麼
    if(response.data.code == abbr.errorLoginId){
    	store.commit('setLoginOut');
    	return;
    }else{
    	 return response;
    }
}, function (error) {
	// 對響應錯誤做點什麼
	return Promise.reject(error);
});
export default instance;


//獲取個人信息接口
export const apiGetUserObj = params => {
	return new Promise((resolve, reject) => {
		instance.post(
			baseApi+'/user/findStudent',
			Qs.stringify({
				stuId: params.id,
			})
		)
		.then(response => {
		  resolve(response.data)
		})
		.catch(error => {
		  reject(error)
		})
	})
}

4.開發環境跨域配置：修改config目錄下面的index.js導出的dev部分的proxyTable

proxyTable: {
			"/api":{
					target: 'http://www.baidu.com',
					changeOrigin: true,
					pathRewrite: {
						'^/api': '/'
					}
			},
			"/examapi":{
					target: 'http://www.sina.com',
					// target: 'http://192.168.1.109',
					changeOrigin: true,
					pathRewrite: {
						'^/examapi': '/'
					}
			},
			"/recuiteapi":{
				target: 'http://www.tb.com',
				changeOrigin: true,
				pathRewrite: {
					'^/recuiteapi': '/'
				}
			}
		},