问题描述:

在项目中,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的路由界面直接刷新也可以正常显示。

Logo

前往低代码交流专区

更多推荐