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');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、解决

这个问题的本质，是请求路径在后端没对应上
所以，要解决这个问题，需要从后端代码着手

我这里用的是node+express部署项目
就这个情况，来解决

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

npm i connect-history-api-fallback
1

2、修改server.js
关键代码：

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

完整配置：

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');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

重启项目，即可。
此时，刷新页面，不会报404问题。