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

在最近帮客户开发的一个项目中,由于项目的特殊性,需要用到 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 服务器的设置方式截图如下。

nginx.conf 文件的路径
在这里插入图片描述
多域名配置文件的路径
在这里插入图片描述
可以选择将上述两个文件通过右侧的“下载命令”下载至本地进行编辑,再上传至宝塔面板。也可以直接单击右侧的“编辑”命令,通过宝塔面板自身提供的在线编辑器进行更改。

通过在线编辑器更改服务器配置的截图如下所示。

宝塔面板的在线编辑器
在这里插入图片描述

  • 24
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值