nginx上部署多个vue项目,目前可以访问到页面静态资源,但无法请求到后端接口
vue.config.js的配置信息
// 跨域配置
module.exports = {
devServer: { //记住,别写错了devServer//设置本地默认端口 选填
port: 9333,
proxy: { //设置代理,必须填
'/apis': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
target: 'http://172.22.1.27:8010', //代理的目标地址 ,//process.env.VUE_APP_SERVER_URL 'http://192.168.80.129:8000''http://172.22.1.27:8000'
changeOrigin: true, //是否设置同源,输入是的
pathRewrite: { //路径重写
'^/apis': '' //选择忽略拦截器里面的单词
}
}
}
},
pwa:{
iconPaths:{
favicon32:'./favicon.ico',
favicon16:'./favicon.ico',
appleTouchIcon:'./favicon.ico',
maskIcon:'./favicon.ico',
msTileImage:'./favicon.ico',
}
},
publicPath: process.env.NODE_ENV === 'production'
? '/app/mall/' // /app/mall/ 对应后面`nginx`路径,这里添加的目的是其他静态资源文件统一前缀路径
: '/',
}
nginx.conf的配置
server {
listen 9333;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /other/ {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /app/mall {
alias mall;
index index.html index.htm;
try_files $uri $uri/ /app/mall/index.html;
}
location /apis {
proxy_pass http://172.22.1.27:8010;
}
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://172.22.1.27:8000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
页面报错信息
你后台的接口就不要用nginx代理了吧
你vue项目已经做了一层代理