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

zh q

于 2022-02-02 16:15:00 发布

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_61924791/article/details/122764674

版权

本文介绍了如何使用vue.config.js对Vue CLI项目进行个性化定制，特别是针对跨域问题，通过配置反向代理解决。通过在devServer对象中设置proxy，可以将所有以'/api'开头的请求代理到'http://localhost:3000'，并详细解释了changeOrigin选项的作用。此外，还提醒读者注意proxyTable在旧版CLI中的使用，而proxy是新版CLI的配置方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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版本以后的项目中使用