Bootstrap

VUE 的vue.config.js配置文件及代理操作

1.使用vue inspect > output.js 可以查看到vue脚手架的默认配置

2.使用vue.config.js可以对脚手架进行个性化定制,详情见:配置参考 | Vue CLI

遇到的跨域问题就可以在配置文件中使用反向代理操作进行解决,可以配置多个代理

如下:

module.exports = {
    devServer:{
        proxy:{
            '/api':{// 匹配所有以 '/api'开头的请求路径
                target:'http://localhost:3000',// 代理目标的基础路径
                pathRewrite:{'^/api':''},//正则匹配所有以api开头的路径,把api替换为''空
 
                // changeOrigin设置为true时,服务器收到的请求头中的host为要代理的host:localhost:3000
                //changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
                changeOrigin: true,//默认值为true,可省略不写
                ws:true  //用于支持websocket 默认值为true,可省略不写
            }
        }
    }
}

注意: proxyTable在vue早期的cli2项目中使用,而proxy在vue-cli3版本以后的项目中使用

;