vue-router history模式服务器端配置过程记录
history路由
history模式是指使用HTML5的historyAPI实现客户端路由的模式，它的典型表现就是去除了hash模式中url路径中的#。在使用Vue-Router时开启history模式非常容易，只需要在实例化路由时传入mode:'history'配置项即可，但缺少服务端支持时，基于historyAPI的路由无法从url地址栏直接访问指定页面，这个很容易理解，因为url地址栏里输入后回车相当于发送了一次GET请求，那么不带#的路由路径就和普通的API接口是一样的，既然服务端并没有定义这样的接口，那直接访问时出现404页面就很正常了。
官方示例
官方提供了很多处理这种场景的方式，以node.js版本的处理方案为例：
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})
不难看出，它的处理思路就是所有请求都强制重定向到首页，相当于服务端屏蔽了访问资源不存在的情况，而将路由的工作留给客户端自己去处理，这样启用了history模式的前端路由在直接定位到子页面时就不会报错了。
vue-router history模式配置
vue-router的history模式需要将路由配置中的mode设置成history，同时还需要在服务器端进行相应的配置。
与hash模式相比，在history模式下，页面的url中会少一些如#这样的符号：
hash：www.example.com/#/login
history：www.example.com/login
单页应用程序中，在history模式下浏览器会向服务器请求这个页面，但是服务器端并不存在这个页面于是就返回404。所以这个时候就需要给服务器端进行配置：除了静态资源以外都需要返回单页应用的index.html。
服务器配置——nodejs
在nodejs服务器中需要引入connect-history-api-fallback这个模块来处理history模式，并在使用处理静态资源的中间件前使用这个模块：
const path = require('path')
// 导入处理history模式的模块
const history = require('connect-history-api-fallback')
const express = require('express')
const app = express()
// 注册处理history模式的中间件
app.use(history())
// 处理静态资源的中间件
app.use(express.static(path.join(__dirname, './web')))
app.listen(3000, () => {
console.log('service started at port 3000')
})
服务器配置——nginx
先将打包后的文件放入html文件夹下，再打开conf文件夹下nginx.conf文件，修改如下配置：
http {
# ...other config
server {
# ...other config
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
}
总结
到此这篇关于vue-router history模式服务器端配置的文章就介绍到这了,更多相关vue-router history模式配置内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07
- 这篇文章主要介绍了Postgresl 如何选择正确的关闭模式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-18
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 很多集成的PHP环境(PHPnow WAMP Appserv等)自带的MySQL貌似都没有开启MySQL的严格模式，何为MySQL的严格模式，简单来说就是MySQL自身对数据进行严格的校验（格式、长度、类型等），比如一个整型字段我们写入一个字符串类型的数...2013-10-04
- 在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。本文就详细的介绍一下...2021-10-25
- 下面将把C#里实现IDispose模式的代码展现出来，大家一起来学习一下，它的使用场合也很多的，当我们手动对网站，数据库作封装时，都会用的到...2020-06-25
C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了JavaScript设计模式之职责链模式，对设计模式感兴趣的同学，可以参考下...2021-04-25
- 这篇文章主要为大家介绍了JavaScript设计模式中的状态模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-12
- 当我们在星际中开地图和几家电脑作战的时候，电脑的几个玩家相当于结盟，一旦我们出兵进攻某一家电脑，其余的电脑会出兵救援。 那么如何让各家电脑知道自己的盟友被攻击了...2016-11-25
- 这篇文章主要介绍了Java接口DAO模式代码原理及应用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-03
- 这篇文章主要介绍了C#中的IDisposable模式用法,讲述了垃圾资源回收机制的实现,并对比分析了Dispose()方法、~DisposableClass()析构函数、虚方法Dispose(bool disposing)的原理,需要的朋友可以参考下...2020-06-25
- 版本：php_v2.0.6 在CloudsearchClient的类中，开启debug模式，设置为true 如：$opts = array('host'=>$host,'debug'=>true); 注意true不能加引号...2016-05-19
- 对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-04-03
- 这篇文章主要介绍了C#使用Dispose模式实现手动对资源的释放,涉及C#采用Dispose模式操作资源的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家介绍了JavaScript设计模式中的单例模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 您是否遇到过孩子想要玩手机又不好拒绝，或者是您想要给孩子配一个联系用的手机有担心孩子玩手机上瘾？如果您购买的是小米手机，那么MIUI的儿童模式就能很好地解决这个问题...2016-12-21
- 这篇文章主要介绍了JavaScript设计模式之命令模式，对设计模式感兴趣的同学，可以参考下...2021-04-25
- 我们建站的时候，开始是每次请求数据库都要重新连接的、这样显然不合理、然后自己封装了一个数据库操作类、DBTools.php、要解决一个连接多次使用的话、最好的办法是使...2016-11-25
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下...2021-06-08