配置devServer动态代理，再也不用担心切后台了

因为项目需要对接多个后台，早先并未配置动态代理，每次联调都要修改后台服务地址，然后重启服务（因为webpack配置文件不在文件监听内），非常影响开发效率，于是有了如下改造。

因为webpack只会监听被入口文件（index.js）依赖的文件，所以只要令代理后台地址文件加入依赖即可。

配置后台服务的地址

新建proxyTarget.js文件，配置后台服务的地址，一般就是协议+主机名+端口号。

// proxyTarget.js
module.exports = {
    
    
  local: 'http://127.0.0.1:8080', // 本地
  sit: 'https://xxx.com/', // sit
  uat: 'http://100.xxx.xxx.xxx:8088/', // uat
}

配置接口基础上下文

本人项目使用axios（其他库也是类似的方法），其配置options中有baseURL可选项。新建baseUrl.js文件，配置不同的baseURL，每个后台拥有对应的唯一的标识符（本人直接使用的key）。

// baseUrl.js

let baseURL = ''
let localPath = 'local' // 本地
// let localPath = 'sit' // di
// let localPath = 'uat' // uat

if (process.env.NODE_ENV === 'development') {
    
    
  baseURL = `/${
      
      localPath}/devApi`
} else {
    
    
  baseURL = '/api'
}

export default baseURL

修改webpack中的devServer配置

不同vue-cli脚手架创建的项目配置文件名和位置不一样，但修改的主体内容是一致的。

const path = require('path')
const targets = require('./proxyTarget')

const proxyInfo = (name) => {
    
    
  return {
    
    
    target: targets[name], // 代理目标
    changeOrigin: true, // 将跨域服务通过node代理至本地
    ws: true, // 代理websocket
    pathRewrite: {
    
     // 重写路径，根据正则匹配
      [`^/${
      
      name}`]: ''
    }
  }
}

const proxy = {
    
    }
// 动态的代理组装成webpack需要的Proxy格式
Object.keys(targets).forEach(targetName => {
    
    
  proxy[`/${
      
      targetName}`] = proxyInfo(targetName)
})

上面的代码为公共部分，vue-cli3脚手架之前的项目，另外修改根目录下的config/index.js文件：

module.exports = {
    
    
    // ...
    dev: {
    
    
        proxyTable: proxy
    }
}

vue-cli3及以上版本创建的项目在根目录下创建或者修改vue.config.js文件：

module.exports = {
    
    
  // ...
  devServer: {
    
    
    // ...
    proxy: proxy
  }
}

项目启动后，如果切换后台，就只需要修改baseUrl文件即可动态切换代理。

参考资料

proxyTable设置代理解决跨域问题
Webpack Proxy 代理使用更好的方式提升开发效率
vue-cli官方文档
http-proxy-middleware官方文档