目录
- 问题背景
- nginx配置(解决页面刷新失效问题)
- 注意点
- 用户登录后出现404
- 问题描述
- 问题解决
问题背景
项目需要部署到服务器之后由第三方进行了反向代理,所以我们必须适配第三方的url。由于第一次部署固定好路由格式的前端项目,途中遇到了比较多的问题。
nginx配置(解决页面刷新失效问题)
首先nginx.conf
要配置正确,核心配置如下:
server {listen 前端端口;server_name服务器ip;#charset koi8-r;#access_loglogs/host.access.logmain;location / {root dist所在目录/dist;try_files $uri $uri/ /index.html;indexindex.html index.htm;} location /prod-api/{proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass 后端访问url;}}
注意点
- 服务器ip可以是代理之后的url
try_files $uri $uri/ /index.html;
可以让页面刷新后重新定向,加上就能解决刷新页面失效问题- 若依前后端分离部署时带后缀
/prod-api
,定向时需要加上 - 后端访问url即在前端
vue.config.js
中,proxy
里的[process.env.VUE_APP_BASE_API]
中target
后填写的url
用户登录后出现404
问题描述
用户登录后页面重定向到404页面,点击返回首页后才能进入到正常页面
问题解决
前端需要增设子路由,如:/app
(参考若依文档->前端手册->应用路径)