13518219792
这篇文章主要讲解了“vue-router history模式服务器端配置的方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue-router history模式服务器端配置的方法”吧！
创新新互联，凭借十载的成都网站建设、成都做网站经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上1000家案例。做网站建设，选创新互联公司。
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模式需要将路由配置中的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模式服务器端配置的方法这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
