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

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>

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