開發階段

　　在開發環境與後端除錯的時候難免會遇到跨域問題，在 vue 專案中常用的是 proxyTable，這個用起來很方便。

　　開啟 config 資料夾下面的 index.js，找到 dev 開發模式的 proxyTable，新增以下程式碼即可：

        proxyTable: {
            '/api': {
                target: 'http://xxx.xxx.xxx/', // 介面的域名
                changeOrigin: true, // 在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
 

　　　　　　　　　 secure: true, // 如果是https介面，需要配置這個引數
                pathRewrite: { // 路徑重寫，
                    '^/api': '/api' // 替換target中的請求地址，也就是說以後你在請求http://api.jisuapi.com/XXXXX這個地址的時候直接寫成/api/XXXXX即可。
                }
            }
        },

　　在需要呼叫的介面前加上 "/api" 即可

const menu = (params) => {
  return
 
 axios.get("/api/menu",params).then(res => res.data)
};

生產階段

　　情況一：介面有統一的命名

　　在專案打包上線時，程式碼裡的請求地址不需要改動，

　　線上程式碼執行時，就不會使用代理了，碰到 axios.get('/api/menu') 請求，因為在 api 的前面有個 "/" ，表示根目錄的意思，

　　所以 "/api/menu" 會被解析為 hostname+port+"api/menu" ，所以請求地址就為 "www.xxx.com:8080/api/menu"。

　　這裡有一個問題，就是這個 api 也在路徑中。

　　解決方案

　　情況二：介面沒有統一的命名

　　還是這個路徑 "www.xxx.com:8080/api/menu" 中的 api ，如果真實介面中沒有 api 這一層，路徑就會報錯。真實介面是 "www.xxx.com:8080/menu"

　　解決方案：分別區分兩種模式，然後拼接介面，具體如下。

const rootUrl = process.env.NODE_ENV === 'development' ? '/api' : '';

const menu = (params) => {
    return axios.get(rootUrl + '/menu', params).then(res => res.data)
};

　　還可以分別在 /config/dev.env.js 和 /config/prod.env.js 中分別設定 API_ROOT，然後取出再做介面的拼接。

//config/dev.env.js
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API_ROOT: '"/api"'
})

//config/prod.env.js
module.exports = {
    NODE_ENV: '"production"',
    API_ROOT: '"http://baidu.xxx.com/"'
}

//在介面呼叫的時候拼接
const rootUrl = process.env.API_ROOT;

const menu = (params) => {
    return axios.get(rootUrl + '/menu', params).then(res => res.data)
};