Vue 项目中 history 路由模式的使用

news2024/9/26 5:24:31

在最近帮客户开发的一个项目中，由于项目的特殊性，需要用到 Vue 中的 history路由模式。该模式使用时会涉及到“上传白屏”和“刷新 404 问题”。在帮助客户解决这两个问题的过程中，总结问题的解决方案并记录下来，希望能够保留这篇文档，以备将来遇到同样问题可以顺利解决。

【项目环境】

项目域名：https://www.is.capital测试服务器：Tomcat
运营服务器：Nginx（宝塔面板）

【为什么要使用 history 路由模式】

起初项目开发过程中使用的是 hash 路由模式，在第一次上传测试服务器让客户浏览时，客户说无法看到页面。该项目面对的是境外澳洲的最终用户，在国内都可以顺利看到页面的前提下，我猜测是境外无法看到国内域名末尾带有#的项目。
尽管该结论并没有得到最终明确的论证，但是我决定使用 history 模式尝试一下。当将路由模式改为
history 之后，客户反映在境外可以看到该项目的页面了。

【上传白屏问题】

测试服务器是我自己购买的一个服务器，该服务器上有许多项目存在，因此我在服务器根目录下创建了一个名为 security2 的子目录，用来存放该客户的项目。上传白屏就是由于这个子目录导致的。
在这里插入图片描述
结论：若项目上传至服务器的二级目录下，则需要在路由文件中将二级目录名由 base 属性指定。
例如：本次开发过程中，项目上传至了测试服务器的二级目录 security2 中，则路由文件\router\index.js
的配置如下所示。
const router = new VueRouter({ mode:“history”,
base:“/security2”, // 将服务器的二级目录名作为路由的基地址
routes
});

【刷新 404 问题】

使用 history 路由模式开发的项目，除了首页以外，其他子页面在刷新时会出现 404 错误。该问题的解决需要后台服务器的设置才能完成。本项目的针对测试服务器和运营服务器均进行了相应的调整。
1、Tomcat 服务器：
在后台的项目跟目录下，找到下列文件：
webapps\security2\WEB-INF\web.xml

在该文件中添加下列代码：

<location>/security2/index.html</location>

在这里插入图片描述
2、Nginx 服务器：
最终的运营服务器客户选择了宝塔面板的 Nginx 服务器。该服务器要修改以下两个配置文件。
（1）nginx.conf 配置文件：
/www/server/nginx/conf/nginx.conf
（2）多域名配置文件：
/www/server/panel/vhost/nginx/域名.conf
将上述两个文件在宝塔面板找到，添加下列内容。
location / {
try_files $uri $uri/ /index.html;
}
现将宝塔面板Nginx 服务器的设置方式截图如下。