apache和nginx下vue页面刷新404的解决方案
作者：对这是我的昵称 发布时间：2024-04-26 17:37:16
标签：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;
}
来源：https://blog.csdn.net/Attitude_do_it/article/details/122682416
0
投稿猜你喜欢
本文为大家分享了Ubuntu下Anaconda和Pycharm的配置方法，供大家参考，具体内容如下1.对于Ubuntu18.04，一开始会有- 目录一、简单文本类型数据二、复杂型表格提取三、图片型表格提取大家好，从PDF中提取信息是办公场景中经常需要用到的操作，也是经常又读者在后台问
- 废话不多说，直接上代码create database mydbuse mydbgocreate table account( i
- 1、去除一个数组中的重复元素：使用grep函数代码片段： 代码:my @array = ( 'a', 'b'
- 近日，朋友写一个关于成绩管理的系统，其中遇到一个小问题。如果按照SQLSERVER的ORDER 排序时，比如遇到两个100分，结果必然是名次
- insert into values插入多条数据insert into 表名（字段名1，字段名2）values(值a1，值b1), (值a2
- videojs虽然已经为我们提供了较为完善的功能.但是在实际应用中,我们仍然可能需要为这个播放器添加部分功能.下面将以添加标题栏为示例简要介
- 说明和代码如下：<％@ language = vbscript％><％
- 这里首先要介绍官方文档，对python有了进一步深度的学习的大家们应该会发现，网上不管csdn或者简书上还是什么地方，教程来源基本就是官方文
- 什么是seleniumselenium 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样
- numpy.flip(m, axis=None)Reverse the order of elements in an array alon
- 情景一： var yx01 = new function() {return "圆心"}; alert(yx01);我们
- 我们有下面一张PDF格式存储的表格，现在需要使用Python将它提取出来。使用Python提取表格数据需要使用pdfplumber模块，打开
- python中shape()函数shape函数是numpy.core.fromnumeric中的函数，它的功能是读取矩阵的长度。1、shap
- python一直对中文支持的不好，最近老遇到编码问题，而且几乎没有通用的方案来解决这个问题，但是对常见的方法都试过之后，发现还是可以解决的，
- 1.前言我在进行DEM数据的裁剪时，发现各个省的数据量非常大，比如说四川省的30m的DEM数据的大小为2G。考虑到有限的电脑磁盘空间，我对T
- 一、介绍数据库的约束是对表中数据进行的一种限制，为了保证数据的正确性、有效性、完整性。无论是在添加数据还是在删除数据的时候，都能提供帮助。所
- 1、es的批量插入这是为了方便后期配置的更改，把配置信息放在logging.conf中用elasticsearch来实现批量操作，先安装依赖
- 一个简单的php文件下载源代码，虽不支持断点续传等，但是可以满足一些常用的需求了。php下载文件其实用一个a标签就能实现，比如 <a
- 本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。插件介绍先上一个图：下载地址：https://gith
