这篇文章主要介绍了vue-router history模式服务器端如何配置的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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 = 80http.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模式服务器端如何配置”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
