Vue2：路由history模式的项目部署后页面刷新404问题处理

一、问题描述

���们把Vue项目的路由模式，设置成history

然后，build

并把dist中的代码部署到node+express服务中

访问页面后，刷新页面报404问题

二、原因分析

server.js文件

会发现，文件中配置的路径没有Vue项目中对应的路径

所以，刷新页面时，报404

这也是history模式的一个小问题。

const express = require('express')const app = express()app.use(express.static(__dirname+'/static'))app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');})

三、解决

这个问题的本质，是请求路径在后端没对应上

所以，要解决这个问题，需要从后端代码着手

我这里用的是node+express部署项目

就这个情况，来解决

1、安装connect-history-api-fallback中间件

npm i connect-history-api-fallback

2、修改server.js

关键代码：

const history = require('connect-history-api-fallback')app.use(history())

完整配置：

const express = require('express')const history = require('connect-history-api-fallback')const app = express()app.use(history())app.use(express.static(__dirname+'/static'))app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');})

重启项目，即可。

此时，刷新页面，不会报404问题。