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


Posted in Javascript onAugust 18, 2018

本文介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
Javascript浅谈之this
Dec 17 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
详解js前端代码异常监控
Jan 11 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 #Javascript
You might like
php中文验证码实现示例分享
2014/01/12 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python计算文本文件行数的方法
2015/07/06 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
用pycharm开发django项目示例代码
2018/10/24 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python定义一个Actor任务
2020/07/29 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
python函数超时自动退出的实操方法
2020/12/28 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
幼儿园教师考核制度
2014/02/01 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
优秀教师推荐材料
2014/12/16 职场文书
孟佩杰观后感
2015/06/17 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript