最近在项目中遇到proxy 代理一直404,很艹蛋,整了半小时才整明白。
Vue项目中若无config文件夹则在根目录创建vue.config.js,代码如下:
module.exports = {
// 基本路径 baseURL已经过时
publicPath: './',
// 输出文件目录
outputDir: 'dist',
lintOnSave: true,
chainWebpack: () => { },
configureWebpack: () => { },
productionSourceMap: true,
parallel: require('os').cpus().length > 1,
pwa: {},
// webpack-dev-server 相关配置
devServer: {
disableHostCheck: true,
https: false,
hotOnly: false,
proxy: 'http://XXXXXX.org',
before: app => { }
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
配置完上方代码即可请求
this.axios.post("/api/post").then((res) => {
console.log(res);
});
代理的作用就是封装API域名替换成当前本地域名:
实际请求到的数据是 http://XXXXXX.org 这个域名的API数据
反向代理就这么简单又磨人。