随笔- 324 文章- 0 评论- 27 阅读- 70万

说下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()
    }
  })
}