nginx代理转发vue的路由

问题描述：

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