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

简介: 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

相关文章
|
1天前
|
JavaScript 定位技术
BIGEMAP地图VUE中引入
BIGEMAP地图VUE中引入
3 0
BIGEMAP地图VUE中引入
|
1天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
6 0
|
1天前
|
JavaScript 定位技术 开发者
vue项目使用腾讯地图获取定位
vue项目使用腾讯地图获取定位
4 0
|
1天前
|
JavaScript 开发者
如何新建一个vue+vant移动端项目
如何新建一个vue+vant移动端项目
6 0
|
5天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
10天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
71 7
使用 Vue CLI 脚手架生成 Vue 项目
|
1天前
|
JavaScript
Vue全局注册与局部注册异同点
Vue全局注册与局部注册异同点
12 6
|
1天前
|
JavaScript
Vue的小知识点
Vue的小知识点
7 2
|
7天前
|
JavaScript