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.hqwc.cn/news/81998.html

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

相关文章

RunnerGo中WebSocket、Dubbo、TCP/IP三种协议接口测试详解

大家好,RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验,最近得知RunnerGo新增对,WebSocket、Dubbo、TCP/IP,三种协议API的测试支持,本篇文章跟大家分享一下使用方法。 WebSocket协议 WebSocket 是一种…

Android图片压缩原理分析(三)—— 哈夫曼压缩讲解

前言 前面几篇文章,我们了解了一些关于图片压缩的基础知识以及Android的Bitmap相关的知识,然后也提到的Skia是Android的重要组成部分。在鲁班压缩算法解析中初次提到了哈夫曼压缩,那么他们之间到底是存在什么关系呢?今天我们就来探…

前端技术Vue学习笔记--005

Vue学习笔记 一、非父子通信-event bus 事件总线 作用:非父子组件之间,进行简易消息传递。(复杂场景用----Vuex) 使用步骤: 创建一个都能访问的事件总线 (空Vue实例)-----utils/EventBus.js /…

JavaWeb学习-Day10

SpringBootWeb案例 准备工作 开发流程: 开发接口步骤: 删除部门: 新增部门: 简化代码: limit:分页展示,公式:(页数-1)*页面总数,页面总数 目前出现的问题&am…

安装docker服务及docker基本操作

一、docker安装(yum安装) 基于centos7 1.添加docker-ce 源信息 安装依赖包(yum-utils 提供了 yum-config-manager ,并且 device mapper 存储驱动程序需要device-mapper-persistent-data 和 lvm2) yum install yum-…

基于Android水果蔬菜果蔬到家商城系统 微信小程序uniAPP的开发与实现

果蔬到家是商家针对用户必不可少的一个部分。在商铺发展的整个过程中,果蔬到家担负着最重要的角色。为满足如今日益复杂的管理需求,各类果蔬到家程序也在不断改进。本课题所设计的springboot基于HBuilder X的果蔬到家APP,使用SpringBoot框架&…

1 Hadoop入门

1.Hadoop是什么? (1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 (2)主要解决,海量数据的存储和海量数据的分析计算问题。 (3)广义上来说,Hadoop通常是指一个更广泛的概念——Hadoop生态圈 2.Hadoop的优势 3 Hadoop组成 4 HDF…

利用 Apifox 的 Mock 功能模拟常见业务数据的最佳方法

Apifox 拥有强大的 Mock 功能,兼容 Mock.js 语法的同时还提供 Nunjucks 和自定义脚本支持,能够满足不同场景需求。 今天给大家分享一些常见业务场景的 Mock 使用技巧,当然,实现的方法不唯一。在开始之前,你需要将 Api…

MyCAT命令行监控

9066端口 ,用mysql命令行连接 Mysql –utest –ptest –P9066 show help 可显示所有相关管理命令 显示后端物理库连接信息,包括当前连接数,端口 Show backend Show connection 显示当前前端客户端连接情况,已经网络流量信息、…

【C语言】动态内存管理(malloc,free,calloc,realloc)-- 详解

一、动态内存分配 定义:动态内存分配 (Dynamic Memory Allocation) 就是指在程序执行的过程中,动态地分配或者回收存储空间的分配内存的方法。动态内存分配不像数组等静态内存分配方法那样,需要预先分配存储空间,而是由系统根据程…

构造不包含字母和数字的webshell

文章目录 利用不含字母与数字进行绕过知识介绍题目方法一&#xff1a;异或操作绕过方法二&#xff1a;取反进行绕过 过滤不是很严格的情况进阶绕过利用php7特性直接绕过 利用不含字母与数字进行绕过 知识介绍 <?phpecho "A"^"";?>从运行结果为! …

铜矿人员定位安全方案

针对铜矿中的人员定位安全需求&#xff0c;可以采用以下方案&#xff1a; 1.实时人员定位系统&#xff1a;建立一个实时人员定位系统&#xff0c;通过在矿工的工作服或安全帽上安装UWB或RFID定位设备&#xff0c;以及相应的接收器和基站&#xff0c;实时跟踪和定位矿工的位置。…