apache和nginx下vue页面刷新404的解决方案
更新时间：2022年12月09日 09:46:32 作者：对这是我的昵称
这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
问题描述
记录一个新手很容易遇见的问题，vue的项目，在打包前本地cli模式运行没有任何问题，但是打包完在apache或者nginx中配置了域名后，项目会出现刷新后404的奇怪问题
原因
vue-router的mode使用了history模式，默认应该是hash模式。
一般都会因为hash模式的url不够美观，都用的history模式，而问题是由于history模式引起的。
history模式下的url并不是真实存在的，所以刷新后会找不到。
当你打包了项目后，一般默认会生成一个dist文件夹，文件夹下有且只有一个index.html文件。
并且vue是单页应用，因此我们可以认为所有的url路径其实都应该指向index.html的，至于路径vue会用独有的路由解析方式把他解析到对应的js文件，然后js把文件中的html模块渲染到index,html中，实现页面的展示，所以不要被路径所迷惑，
你可以把url路径理解为vue匹配页面所需要的参数，但是这个url路径如果你直接访问或者刷新，不管是apache还是nginx都无法去匹配到这个url路径，因为它不存在，所以我们此时就要在apache或者nginx配置一下伪静态，让每个url路径都指向index.html就可以了。
伪静态配置
apache伪静态配置
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>nginx伪静态配置
location / {
......
try_files $uri $uri/ /index.html;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
这篇文章主要介绍了SpringBoot+Vue开发之Login校验规则、实现登录和重置事件,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
这篇文章主要介绍了浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
本文主要介绍了vue3使用flv.js播放推流视频的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
本文主要介绍了Vue显示图片的几种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了vue 自定义右键样式的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-08-08
vue结合v-for和input实现多选列表checkbox功能
在Vue中,可通过v-for指令和v-model实现多选列表功能,首先,使用v-for指令遍历数组生成列表项,每个列表项包含一个复选框,复选框的v-model绑定到一个数组变量,用于存储选中的值,感兴趣的朋友跟随小编一起看看吧2024-09-09
最新评论