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模式配置内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!