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 对Cookie 操作的封装小结
Dec 31 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
js实现圆形菜单选择器
Dec 03 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 七大优势分析
2009/06/23 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
进一步理解Python中的函数编程
2015/04/13 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Selenium定位元素操作示例
2018/08/10 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Pycharm github配置实现过程图解
2020/10/13 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
节约能源标语
2014/06/17 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
中学生思想品德评语
2014/12/31 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
聘任书范文大全
2015/09/21 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python