通过Vue CLI配置后端代理解决开发环境跨域问题（支持websocket）

写在最前

前几天写了Angular CLI配置后端代理的文章，今天更新一下Vue CLI的代理设置，同样同时支持http(https)和wss(ws).

具体实现

在项目根目录下找到 vue.config.js 文件，如果没有，就手动创建一个。

// vue.config.js  
module.exports = {  
  devServer: {
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/api': {
        target: `https://192.168.1.1/prod-api`, //需要根据实际情况修改target
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/websocket': {  // WebSocket服务代理配置
        target: `wss://192.168.1.1/websocket/`, // 你的websocket服务器的地址  
        ws: true,  // 设置为true
        changeOrigin: true, // 如果你的API服务器不在相同的域上，则需要设置为true  
        pathRewrite: {  
          '^/websocket': '' // 重写路径，将 '/websocket' 前缀去除  
        }  
      },
      [process.env.VUE_APP_BASE_API]: { //process.env.VUE_APP_BASE_API在项目跟目录下的".env.staging"、".env.production"、".env.development"文件定义，需要根据实际情况修改target
        target: `https://192.168.1.1/rest-api`, //需要根据实际情况修改target
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },  
    },
    disableHostCheck: true
  }
}

配置完成后，用npm run dev运行即可生效。

下期更新生产环境中nginx的代理配置