nginx代理转发vue的路由
问题描述:在项目中,nginx配置好了资源访问之后,发现无法访问vue配置的路由资源。问题分析:正常配置的nginx,nginx默认会把每个资源当做静态页面资源(像如下配置)location / {root /var/www/html;index index.html;}可是我们打包出来的vue项目只有一个index页面,也就是只有主页能被找到,其他路由的页面都被当成了静态页面,ngin...
问题描述:
在项目中,nginx配置好了资源访问之后,发现存在刷新界面乱跳的情况,而且会出现404,空白页面等。
问题分析:
正常配置的nginx,nginx默认会把每个资源当做静态页面资源(像如下配置)
location / {
root /var/www/html;
index index.html;
}
可是我们打包出来的vue项目只有一个index页面,也就是只有主页能被找到,其他路由的页面都被当成了静态页面,nginx想找到这个静态资源自然找不到
解决方法:
我的vue项目打包之后放在了/var/www/html/unified_authentication_system目录,unified_authentication_system是我的vue项目名,里面就是js,css,img,index.html资源了
修改nginx配置:
location / {
root /var/www/html;
index index.html;
try_files $uri $uri/ @fallback;
}
location @fallback {
root /var/www/html/unified_authentication_system;
index index.html;
rewrite ^.*$ /index.html break;
}
添加如下配置,就能使得unified_authentication_system项目下的页面可以被正常访问,而且vue路由可以由nginx正常转发
我们可以通过http://www.你的域名.com/unified_authentication_system 实现访问页面,里面vue的路由界面直接刷新也可以正常显示。
更多推荐
所有评论(0)