vuerouter配置为history方式,vue router history模式
vue路由有两种模式：哈希模式和历史模式。本文主要介绍vue-router历史模式的服务器端配置的相关信息，有需要的朋友可以参考一下。
history路由
历史模式是指使用HTML5的historyAPI实现客户端路由的模式。其典型表现就是在哈希模式下去掉url路径中的#号。使用Vue-Router时，很容易打开历史模式。在实例化路由时，您只需要传入mode:“history”配置项。但是，在没有服务器支持的情况下，基于historyAPI的路由无法从url地址栏直接访问指定页面。这很好理解，因为在url地址栏输入然后按enter就相当于发送了一个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)={
如果(错误){
console.log(我们无法打开 index.htm 文件。)
}
res.writeHead(200，{
content-Type : text/html；charset=utf-8
})
资源结束(内容)
})
}).listen(httpPort，()={
console.log(服务器侦听：http://localhost:%s ，httpPort)
})
不难看出，它的处理思路是所有请求都被强制重定向到首页，相当于服务器屏蔽了访问资源的缺失，把路由工作留给客户端处理，这样启用了历史模式的前端路由在直接定位到子页面时就不会报错。
vue-router history模式配置
vue-router的历史模式需要在路由配置中设置模式为历史，也需要在服务器端配置。
与哈希模式相比，在历史模式下，页面的url中会出现较少的#等符号：
哈希：www.example.com/#/login
历史：www.example.com/login
在单页应用中，浏览器会以历史模式向服务器请求这个页面，但是这个页面在服务器端并不存在，所以返回404。所以这时候就需要配置服务器：除了静态资源，还需要返回单页应用的index.html。
服务器配置——nodejs
需要在nodejs服务器中引入connect-history-api-fallback模块来处理历史模式，在使用处理静态资源的中间件之前使用该模块：
const path=require(path )
//导入处理历史模式的模块
const history=require(" connect-history-API-fallback ")
const express=require(express )
const app=express()
//注册处理历史模式的中间件。
app.use(history())
//处理静态资源的中间件
app . use(express . static(path . join(_ _ dirname，。/web )))
app.listen(3000，()={
console.log(“服务在端口3000启动”)
})
服务器配置——nginx
首先将打包的文件放在html文件夹中，然后打开conf文件夹中的nginx.conf文件，并修改以下配置：
http {
# .其他配置
服务器{
# .其他配置
位置/{
根html
索引index.html index.htm；
try _ files $ uri $ uri//index . html；
}
}
}
总结
关于vue-router历史模式的服务器端配置的文章到此结束。有关vue路由器历史模式配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。