Vue 中hash 模式与 history 模式的区别

hash 模式:

- 地址中永远带着 # 号,不美观。

- 兼容性比较好。

- 通过手机 app 分享地址时,如果 app 效验严格,该地址会被标记为不合法。

history 模式:

- 地址干净,美观。

- 兼容性和 hash 模式相比略差。

- 项目部署上线时需要修改服务器配置,解决刷新页面 404 的问题。

解决 history 模式刷新页面 404 的问题【宝塔面板】

一、在命令行中输入 npm run build 将项目打包。

 

二、将打包后的 dist 文件夹部署到服务器中。

 注:现在通过域名访问项目,在跳转页面之后。若刷新页面就会出现 404 的问题。

 三、打开项目设置、点击配置文件、添加以下代码、保存即可解决 404 的问题。

 

#解决页面刷新404问题
location / {try_files $uri $uri/ /index.html;
}

 

备注:

- try_files 表示:尝试读取静态文件。

- $uri 表示:用户访问的地址。例如:`http://www.xxx.com/index.html` 那么 $uri 就表示 `/index.html` 。

- $uri/ 表示:用户访问的目录。比如:`http://www.xxx.com/shop/info/` 那么 $uri/ 就表示 `/shop/info/` 。

- 完整解释:try_files 尝试读取用户访问的文件。如果 $uri 存在,就直接返回,如果不存在,继续读取 $uri/ 。如果 $uri/ 存在就直接返回,如果不存在就跳转到 `/index.html` 。

原创作者:吴小糖

创作时间:2023.8.24

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

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

相关文章

es和数据库同步方案

5.5 课程信息索引同步 5.5.1 技术方案 通过向索引中添加课程信息最终实现了课程的搜索,我们发现课程信息是先保存在关系数据库中,而后再写入索引,这个过程是将关系数据中的数据同步到elasticsearch索引中的过程,可以简单成为索引…

nginx基于端口如何配置虚拟主机

在 Nginx 中配置基于端口的虚拟主机(也称为服务器块)与配置基于域名的虚拟主机类似,但是你需要指定监听的端口。以下是基于端口的虚拟主机配置示例: 假设我们要配置两个不同的虚拟主机,一个监听 8080 端口&#xff0c…

机器学习---常见的距离公式(欧氏距离、曼哈顿距离、标准化欧式距离、余弦距离、杰卡德距离、马氏距离、切比雪夫距离、闵可夫斯基距离、K-L散度)

1. 欧氏距离 欧几里得度量(euclidean metric)(也称欧氏距离)是一个通常采用的距离定义,指在m维空 间中两个点之间的真实距离,或者向量的自然长度(即该点到原点的距离)。在二维和三维…

分布式锁系列之zookeeper分布式锁和mysql分布式锁

目录 介绍 下载安装 基本指令​编辑 java集成zookeeper 官方提供版 永久节点 临时节点​编辑 永久序列化节点 判断当前节点是否存在 获取当前节点中的数据内容 获取当前节点的子节点 更新节点内容 删除节点 zookeeper实现分布式锁 Mysql实现分布式锁 总结 介绍 ZooK…

在家构建您的迷你 ChatGPT

ChatGPT 玩起来很有趣。您很可能还希望拥有自己的私下运行的副本。实际上,这是不可能的,因为 ChatGPT 不是一个可供下载的软件,并且它需要强大的计算机能力才能运行。但是您可以构建一个可以在商用硬件上运行的精简版本。在这篇文章中,您将了解 什么语言模型可以表现得像 C…

HDLBits-Verilog学习记录 | Verilog Language-Basics(2)

文章目录 9.Declaring wires | wire decl10. 7458 chip 9.Declaring wires | wire decl problem:Implement the following circuit. Create two intermediate wires (named anything you want) to connect the AND and OR gates together. Note that the wire that feeds the …

类加载器与双亲委派

类加载器与双亲委派 Java 类加载器(Class Loader)是 Java 虚拟机(JVM)的一部分,负责将类的字节码加载到内存中,并将其转换为可执行的 Java 对象。类加载器在 Java 应用程序中起着重要的作用,它…

【校招VIP】TCP/IP模型之常用协议和端口

考点介绍: 大厂测试校招面试里经常会出现TCP/IP模型的考察,TCP/IP协议是网络基础知识,是互联网的基石,不管你是做开发、运维还是信息安全的,TCP/IP 协议都是你绕不过去的一环,程序员需要像学会看书写字一样…

java.lang.UnsupportedOperationException解决方法

java.lang.UnsupportedOperationException解决方法 先放错误信息业务场景报错分析先看报错代码位置进入源码查看至此 真相大白 解决方法总结 先放错误信息 业务场景 已知有学生 张三李四王五赵六 等人 private List<String> nameList Arrays.asList("张三", &…

Nginx前后端服务器部署

Nginx作为正反向代理的中转站&#xff0c;是连接前后端网络服务的媒介 Nginx下载&#xff1a;http://nginx.org/download/http://nginx.org/download/ 一、上传到服务器固定路径下并解压 上传到/opt/software/nginx-1.19.0.tar.gz cd /opt/software/ tar -zxvf nginx-1.19.0.…

Orchestrator自身高可用性方案

目录 获得 HA 的方法 一 没有高可用性 &#xff08;No high availability&#xff09; 使用场景 架构组成 架构图 二 半高可用性&#xff08;Semi HA&#xff09; 三 基于共享数据库后端高可用&#xff08;HA via shared backend&#xff09; 四 基于Raft协议高可用 五…

【Terraform学习】使用 Terraform 从 EC2 实例访问 S3 存储桶(Terraform-AWS最佳实战学习)

使用 Terraform 从 EC2 实例访问 S3 存储桶 实验步骤 前提条件 安装 Terraform&#xff1a; 地址 下载仓库代码模版 本实验代码位于 task_ec2_s3connet 文件夹中。 变量文件 variables.tf 在上面的代码中&#xff0c;您将声明&#xff0c;aws_access_key&#xff0c;aws_…

shell 11(shell重定向输入输出)

一、标准输入输出 标准输入介绍 从键盘读取用户输入的数据&#xff0c;然后再把数据拿到Shell程序中使用; 标准输出介绍 Shell程序产生的数据&#xff0c;这些数据一般都是呈现到显示器上供用户浏览查看

数字 IC 设计职位经典笔/面试题(三)

共100道经典笔试、面试题目&#xff08;文末可全领&#xff09; 1. IC 设计中同步复位与异步复位的区别&#xff1f; 同步复位在时钟沿变化时&#xff0c;完成复位动作。异步复位不管时钟&#xff0c;只要复位信号满足条件&#xff0c;就完成复位动作。异步复位对复位信号要求…

第1章:计算机网络体系结构

文章目录 1.1 计算机网络 概述1.概念2.组成3.功能4.分类5.性能指标1.2 计算机网络 体系结构&参考模型1.分层结构2.协议、接口、服务3.ISO/OSI模型:七层4.TCP/IP模型:四层1.1 计算机网络 概述 1.概念

Arduino 入门学习笔记12 读写外置EEPROM

Arduino 入门学习笔记12 读写外置EEPROM 一、准备工作1. 外置 EEPROM 简介2. Arduino操作外置 EEPROM 流程 二、读写操作流程1. 写操作流程2. 读操作 三、示例代码 一、准备工作 1. 外置 EEPROM 简介 外置I2C接口的EEPROM是一种常用的非易失性存储器&#xff0c;通过I2C总线与…

石油和天然气行业如何实现数字化转型和工业4.0

石油和天然气行业的数字化转型正面临着前所未有的挑战和机遇。尽管过去相对滞后&#xff0c;这个复杂而庞大的行业正逐渐意识到数字化的紧迫性&#xff0c;以应对市场变化、降低运营成本、提高效率和确保可持续性。然而&#xff0c;数字化转型的进程并非一帆风顺&#xff0c;行…

echarts 之 科技感进度条

1.图片展示 2.代码实现 /* ng qty 进度条 */ <template><div class"ngqty-progress"><div class"ngqty-info"><span>X4</span><span>50%</span></div><div :id"barNgQtyProgress index" c…

【校招VIP】产品行测考点之图的推理和分析

考点介绍&#xff1a; 大厂产品校招笔试里经常会出现行测的考察&#xff0c;而图的推理是行测里面稍微有难度的一部分。因为时间有限&#xff0c;很多同学因为没有解题思路而丢分。 『产品行测考点之图的推理和分析』相关题目及解析内容可点击文章末尾链接查看&#xff01; 一…

第 7 章 排序算法(4)(插入排序)

7.7插入排序 7.7.1插入排序法介绍: 插入式排序属于内部排序法&#xff0c;是对于欲排序的元素以插入的方式找寻该元素的适当位置&#xff0c;以达到排序的目的。 7.7.2插入排序法思想: 插入排序&#xff08;Insertion Sorting&#xff09;的基本思想是&#xff1a;把n个待排…