vue webpack開發訪問後臺介面全域性配置

在實際開發中，使用vue 後就是前後端分離開發了，這時候我們就需要訪問後臺的介面來拿到資料，需要URL,name,password來獲取到token才能正常使用介面，下面就來配置。

1.找到config資料夾，在prod.env.js中新增一下程式碼（若沒有此JS,自己建立一個就可以了）

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//123.116.245.150:18081/api"',/*j後臺介面地址*/
  USER_NAME: '""',/*賬號*/
  PASS_WD: '""'/*密碼*/

}

2.找到config資料夾，在dev.env.js中新增下面程式碼。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  API_ROOT: '"//125.116.245.101:18081/api"',/*後臺介面地址*/
  USER_NAME: '"小小小"',/*賬號*/
  PASS_WD: '"123456"',/*密碼*/

})

然後再登入頁面的from中呼叫這裡寫的變數

 form: {
          name: process.env.USER_NAME,
          password: process.env.PASS_WD,
       
        },

在main.js中設定頭部攔截器，程式碼如下

const url = process.env.API_ROOT;
 axios.interceptors.request.use(
      config => {
        let token = localStorage.getItem("x-auth-token");
        if (token) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
          config.headers.token = `${token}`;
        }
   
        if (config.url.indexOf(url) === -1) {
          let getTimestamp=new Date().getTime();
          if(config.url.indexOf('?')>-1){
            config.url = url + config.url +"&timestamp="+getTimestamp;
          }else{
            config.url = url +config.url +"?timestamp="+getTimestamp;
          }
        
        }
        return config;
      },
      err => {
        alert(err)
        return Promise.reject(err);
      });

這樣訪問後臺介面配置就完成了