Vue devServer 配置proxy代理

vue.config.js文件下配置

  devServer: {
    // open: true,    //是否自动打开浏览器
    port: 8080,      //启动端口号
    https: false,    //是否开启https
    hotOnly: false,
    proxy: {
      // 配置跨域
      '/api': {
        target: 'http://www.xxxx/app',
        ws: true,
        changOrigin: true,    //是否开启代理
        pathRewrite: { //  /api开头的请求会去到target下请求
          '^/api': ''        //   替换/api 为空字符
        }
      }
    },
  },

• eg:

import axios from 'axios';
axios.get('/api/versionInfo.json').then()
// 实际访问的是  http://www.xxxx/app/versionInfo.json

遇到的问题

1. 修改target后继续请求还是能请求得到

• 原因：端口会缓存，修改端口号再次请求才会请求到新的target

2. 修改不配置不生效

• 原因： 需要重新启动服务，配置文件只会请求一次，不存在热更新