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>

感谢你能够认真阅读完这篇文章，希望小编分享的“vue下history模式刷新后404错误怎么办”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!