vue下history模式刷新后404错误解决方法
更新时间：2018年08月18日 14:13:07 作者：linvic
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
详解关于Vue2.0路由开启keep-alive时需要注意的地方
这篇文章主要介绍了关于Vue2.0路由开启keep-alive时需要注意的地方,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue + vuex todolist的实现示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了从0到1搭建Element的后台框架的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue中axios请求的封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue监听页面上的报错信息,window.onerror和window.addEventListener(‘error‘)的区别,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了解决vue路由发生了跳转但是界面没有任何反应问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue-cli打包后本地运行dist文件中的index.html操作
这篇文章主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vite5+vue3+ import.meta.glob动态导入vue组件图文教程
import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下2024-07-07
vue+node+socket io实现多人互动并发布上线全流程
这篇文章主要介绍了vue+node+socket io实现多人互动并发布上线全流程,本文给大家提到了socket.io相关用法概览及开发流程，需要的朋友可以参考下2021-09-09
vue使用$attrs和$listeners多级组件嵌套传递数据
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最新评论