背景
项目部署时, 不能用新域名和端口, 需要放到子目录下, 如: https://XX.XX.com/app/
vue cli3 项目打包
# 修改 vue.config.js
module.exports = {
publicPath:'/app/',
// ....
}
nginx 配置
# ...
server {
listen 80;
server_name localhost;
# 静态资源, 代码文件在 /code/front/app/ 下
location /app {
# 使用root和alias这里配置的目录是不同的
#root /code/front/;
alias /code/front/app/;
index index.html index.htm;
# 解决history模式问题
if (!-e $request_filename) {
rewrite ^(.*)$ /app/index.html?s=$1 last;
break;
}
}
# 后台地址
location ^~ /server {
proxy_pass http://127.0.0.1:1101/server;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
# ...
其他
注意:
- 前端项目中配置的后端项目访问地址
- nginx前端配置root/alias的目标资源目录的不同, 本文前端代码在
/code/front/app/
下- 如果路由模式是history注意处理