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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/44348.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

眼外伤险失明辗转成都爱尔眼科就医保视力,患者复查送锦旗!

近日患者王先生到成都爱尔眼科医院进行硅油取出后的二次复查&#xff08;硅油为眼底病手术中一种“填充物”&#xff09;&#xff0c;他激动地为蔡裕主任献上锦旗&#xff0c;感谢医生的救治避免了失明。 意外发生在半年之前&#xff0c;王先生不慎滑倒右眼磕碰到茶几边缘&…

【前端从入门到精通:第九课:CSS3新增属性及伸缩盒布局】

弹性盒模型 介绍 伸缩盒模型也叫弹性盒模型&#xff0c;或flex。它决定一个盒子在其它盒子中的分布&#xff0c;以及如何处理可用的空间。使用该模型&#xff0c;可以轻松的创建“自适应”浏览器窗口的流动布局。 flexbox是一个很新的东西&#xff0c;在w3c希望可以使用flexbo…

力扣1472.设计浏览器历史记录

力扣1472.设计浏览器历史记录 用双指针记录历史记录 以及栈顶高度移动时会直接把之前的记录消掉 class BrowserHistory {int pos-1;int top0;string history[5010];public:BrowserHistory(string homepage) {visit(homepage);}void visit(string url) {pos ;top pos;histor…

[激光原理与应用-103]:配电箱的柜门与柜体为啥要接一根导线?

目录 一、概述 1.1、电气安全 1.2、减少电磁干扰 1.3、方便维修和更换 1.4、其他因素 一、铰链的材质 二、铰链的设计 三、结论 二、正确连接铜线的步骤 1、选择正确的铜线 2、清洁连接处 3、正确连接 4、检查连接是否牢固 参考&#xff1a; 一、概述 配电机柜上…

探索AI艺术的无限可能:SD模型与大模型的融合之美

艺术与科技的结合从未像今天这样紧密。AI绘画技术正以惊人的速度改变着我们创作和欣赏艺术的方式。在这场革命中&#xff0c;Stable Diffusion&#xff08;SD&#xff09;模型扮演了至关重要的角色。 &#x1f31f; SD模型&#xff1a;艺术创作的新维度 SD模型以其生成高质量图…

力扣682.棒球比赛

力扣682.棒球比赛 数组模拟栈记录分数 class Solution {public:int calPoints(vector<string>& ops) {int res0;vector<int> points;for(auto &op:ops){int n points.size();char c op[0];if(c ){res points[n-1] points[n-2];points.push_back(po…

在数据库设计中,选择自增 ID 还是 GUID?这篇文章讲清楚

在数据库设计中&#xff0c;选择自增 ID 还是 GUID 取决于具体的应用场景和需求。 自增 ID 的优点&#xff1a; 性能较好&#xff1a;在插入数据时&#xff0c;自增 ID 的生成速度通常较快&#xff0c;因为数据库可以高效地顺序分配新的 ID 值。存储空间小&#xff1a;通常只…

1.9-改进的CBOW模型的实现

文章目录 0引言1 CBOW模型的重构1.1模型初始化1.2模型的前向计算1.3模型的反向传播 2总结 0引言 前面讲述了对word2vec高速化的改进&#xff1a; 改进输入侧的计算&#xff0c;变成Embedding&#xff0c;即从权重矩阵中选取特定的行&#xff1b;改进输出侧的计算&#xff0c;包…

Perl中的文件系统守卫:实现自定义访问控制

&#x1f6e1;️ Perl中的文件系统守卫&#xff1a;实现自定义访问控制 在系统编程中&#xff0c;文件系统访问控制是确保数据安全和完整性的关键机制。Perl作为一种功能强大的脚本语言&#xff0c;提供了丰富的接口来实现自定义的文件系统访问控制。本文将深入探讨如何在Perl…

【C语言】【排序算法】----- 归并排序

由于最近要考试&#xff0c;好久没有发博客了&#xff0c;非常抱歉大家对我的支持。之后我会不断更新博客&#xff0c;继续创作出高质量的文章&#xff0c;希望能帮到大家&#xff01; 文章目录 一、归并排序基本思想二、递归实现三、非递归实现四、效率分析 一、归并排序基本…

Foxit Reader:高效、安全、多功能的PDF阅读器技术解析

引言 在当今数字化时代&#xff0c;PDF&#xff08;Portable Document Format&#xff09;文档已成为工作、学习和生活中不可或缺的一部分。作为处理PDF文件的重要工具&#xff0c;PDF阅读器的选择显得尤为关键。今天&#xff0c;我们将深入探讨一款备受推崇的PDF阅读器——Fo…

KDP数据分析实战:从0到1完成数据实时采集处理到可视化

智领云自主研发的开源轻量级Kubernetes数据平台&#xff0c;即Kubernetes Data Platform (简称KDP)&#xff0c;能够为用户提供在Kubernetes上的一站式云原生数据集成与开发平台。在最新的v1.1.0版本中&#xff0c;用户可借助 KDP 平台上开箱即用的 Airflow、AirByte、Flink、K…

MySQL数据库中利用定时作业去杀死长时查询以防止数据库死锁风险

MySQL数据库中没有SQLServer数据库中那种传统的定时作业的概念。但是提供了一种【事件】的东西&#xff0c;基本和定时作业貌离神合。 下面我们在MySQL中创建一个事件&#xff0c;它的作用是去监测时间很长的异常查询&#xff0c;并且去主动杀掉该线程以防止数据库发生死锁的风…

探索Perl的自动清洁工:垃圾收集机制全解析

&#x1f9f9; 探索Perl的自动清洁工&#xff1a;垃圾收集机制全解析 Perl是一种高级编程语言&#xff0c;以其强大的文本处理能力而闻名。在Perl中&#xff0c;内存管理对于开发高效且稳定的应用程序至关重要。Perl提供了自动垃圾收集机制&#xff0c;帮助开发者管理内存&…

关于原型和原型链的学习和实践

在前端面试中&#xff0c;原型和原型链始终是一个避不开的问题&#xff0c;今天就弄明白! 原型和原型链 对象的创建方式工厂模式构造函数模式原型模式 原型和原型链实践 对象的创建方式 原型和原型链都是关于对象的内容&#xff0c;先来看一下JavaScript中对象的构建方式。 工…

代码随想录(day3)有序数组的平方

暴力求解法&#xff1a; 注意&#xff1a;需要确定范围&#xff0c;比如nums.sort()是在for循环之外&#xff0c;根据函数的功能来确定 return返回的是nums&#xff0c;而不是nums[i]因为返回的是整个数组 class Solution(object):def sortedSquares(self, nums):for i in r…

人话学Python-基础篇-数字计算

一&#xff1a;数字类型 对于最常见的数据类型,数字在Python中分为三类&#xff1a; 整型(int) 表示的是整数类型的所有数字&#xff0c;包括正整数&#xff0c;负整数和0。和C语言不同的是&#xff0c;Python中的int型没有范围的限制&#xff0c;理论上可以从无限小的整数取到…

RedHat运维-Ansible自动化运维基础22-rhel-system-roles

1. system_roles的官方文档的位置是___________________________________&#xff1b; 2. system_roles的官方文档的位置是___________________________________&#xff1b; 3. system_roles的官方文档的位置是___________________________________&#xff1b; 4. 安装rhel-s…

react基础语法,模板语法,ui渲染,jsx,useState状态管理

创建一个react应用 这里使用create-react-app的脚手架构建项目&#xff08;结构简洁&#xff0c;基于webpack-cli&#xff09;&#xff0c; npx create-react-app [项目名称] 使用其他脚手架构建项目可以参考&#xff1a;react框架&#xff0c;使用vite和nextjs构建react项目…

数学建模国赛入门指南

文章目录 认识数学建模及国赛认识数学建模什么是数学建模&#xff1f;数学建模比赛 国赛参赛规则、评奖原则如何评省、国奖评奖规则如何才能获奖 国赛赛题分类及选题技巧国赛赛题特点赛题分类 国赛历年题型及优秀论文数学建模分工技巧数模必备软件数模资料文献数据收集资料收集…