Vue/cli4配置代理proxy

参考：

官方文档： https://cli.vuejs.org/zh/config/#devserver

自用心得

1、在项目的跟目录下创建vue.config.js文件
2、按需添加如下配置

module.exports = {
    outputDir: 'dist',  //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面，默认未开启
        host: "my-dev.test.com",  //表示启动的时候使用的域名，默认可以不写，则是使用localhost和本机IP，
        disableHostCheck: true,//有些公司出于安全考虑，要求页面和接口必须同主域，这时自己定义的域名，不被浏览器认可，需要设置此项
        port: '8081', // 设置端口号，默认8080
        https: false,  //是否使用https协议
        hotOnly: false, //是否开启热更新，默认开启的
        proxy: {
            '/api': {
              target: 'http://my.test.com', //API服务器的地址
              ws: true, //代理websockets
              changeOrigin: true, // 是否跨域
              pathRewrite: {
                // '^/api5'是一个正则表达式，表示要匹配请求的url中，全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
                '^/api5': '/api',
                //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
                '^/api': '',
              }
            },
        },
    }
}

注意事项

当配置了自定义的host时，
1、同时配置disableHostCheck: true
2、switchHost配置 127.0.0.1 my-dev.test.com