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>

来源：https://segmentfault.com/a/1190000016050854