Vue项目–devServer.proxy代理配置详解
const proxy = require('http-proxy-middleware');
module.exports = {
devServer:{
host: 'localhost',//target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址,这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
}}
},
//...
}
const buildEnvList=["build-dev","build-prod","build-test"]
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ?'/front':'',
assetsDir: 'static',
lintOnSave: false,
devServer: {
proxy: {
"/": {
//后台配置的代理,跟前台冲突的话可以临时注释
target: "http://zt.yunzuoye.net:8085",
// target: "http://192.168.5.5:8085",
// pathRewrite: {
// "^/proxy": ""
// },
ws: false,
changeOrigin: true
},
},
},
css: {
sourceMap: false,
loaderOptions: {
sass: {
prependData: `@import "@/assets/public.scss";`
}
}
},
// 别名
configureWebpack: {
resolve: {
alias: {
components: "@/components",
assets: "@/assets",
views: "@/views",
styles: "@/styles",
util: "@/util",
},
},
},
}