說下vue工程中代理配置proxy

這個代理配置不需要后台進行ngnix代理跳轉了，前端可以做。在vue.config.js文件中進行配置，如下：

module.exports = {
  publicPath: process.env.VUE_APP_BASEURL || '/',
  // 修改webpack的配置
  configureWebpack: {
    // 把原本需要寫在webpack.config.js中的配置代碼 寫在這里 會自動合並
    externals: {
      'T': 'T'
    }
  },
  // devServer 選項單獨配置
  devServer: {
    https: false,
    proxy: {
      '/sys': {
        target: process.env.VUE_APP_API_URL,//這個是全局的環境配置變量，單獨建立的文件，以VUE_APP_開頭的變量，每個文件中都可以訪問，假設這里是http://www.sweeeper.com
        changeOrigin: true,
        onProxyReq: function (proxyReq) {
          proxyReq.removeHeader('origin')
        }
      },
      '/v1': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
        onProxyReq: function (proxyReq) {
          proxyReq.removeHeader('origin')
        }
      }
    },
    before: app => {
      // applyMock(app)
    }
  }
}

　　這里的‘/sys’是所有的axios里邊的以這個開頭的請求都替換成對應的http地址，這就也是所謂的前后端分離，只需要后端布置在服務器上，前端知道地址就可以進行交互。

如果已經配置了代理那么就不需要在axios中配置基地址了，因為給定的url里邊已經替換了相關的字段。

 像下邊的就不需要設置再baseURL。(login.vue登陸文件中)

const newAxios = axios.create({
//	baseURL: ROOT_URL,
  timeout: 1500000
})

　　舉個登陸請求的例子：

import { request } from '@/common/js/axios'
import MD5 from 'crypto-js/md5'
import { getToken } from '@/common/js/cache'

export function login ({ userNo, password }) {
  const url = '/sys/security/logon'
  return request({
    url,
    method: 'post',
    data: {
      userNo,
      password: MD5(password).toString()
    }
  })
}

　　那么請求時候這個地址就變成了：http://www.sweeeper.com/security/logon