vue下history模式刷新后404错误解决方法

本文介绍了vue下history模式刷新后404错误解决方法，分享给大家，具体如下：官方说明文档

本文介绍了vue下history模式刷新后404错误解决方法，分享给大家，具体如下：

官方说明文档：

https://router.vuejs.org/zh/guide/essentials/history-mode.html

一、 实测 Linux 系统 Apache 配置：

更改站点配置文件即可，我这里在 Directory 标签后面添加了官方给的五行配置

<VirtualHost *:80>
 #Created by linvic on 2018-05-24
 Serveradmin 674206994@qq.com
 ServerName blog.xxx.com
 DocumentRoot /home/www/blog

 <Directory "/home/www/blog">
 Options FollowSymLinks
 AllowOverride All
 #Require all denied
 Require all granted
 RewriteEngine On
 
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L] 
 
 </Directory>
</VirtualHost>

二、 实测 Windows 环境下 IIS 配置

1. IIS安装Url重写功能

https://msdn.microsoft.com/zh-cn/gg192883.aspx

• 到该网站下载安装web平台安装程序
• 安装后打开到里面搜索安装URL重写功能

2. web.config

将web.config 文件放置于 npm run build 打包后文件的根目录即可。

ps:此文件会自动给IIS上的URL重写功能进行相关配置

文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <staticContent>
 <remove fileExtension=".woff" />
 <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
 <remove fileExtension=".woff2" />
 <mimeMap fileExtension=".woff2" mimeType="font/x-woff2" />
 <remove fileExtension=".ttf" />
 <mimeMap fileExtension=".ttf" mimeType="font/x-ttf" />
 <remove fileExtension=".json" />
 <mimeMap fileExtension=".json" mimeType="text/json" />
 </staticContent>
 <rewrite>
 <rules>
 <rule name="vue" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。