解决Vue的history模式刷新页面出现404的问题

Posted 2021-12-19 王同学要努力

解决Vue的history模式刷新页面出现404的问题

路由的两种工作模式

（一）、hash模式

• 地址中永远带着#号，不美观
• 若以后将地址通过第三方手机app分享，若app校验严格，地址会被标记为不合法
• 兼容性较好

（二）、history模式

• 地址干净，美观
• 兼容性和hash模式相比略差
• 应用部署上线时需要后端人员支持，解决页面服务器端刷新404的问题

一刷新就报错404

解决办法
应用部署上线时需要后端人员支持，解决页面服务器端刷新404的问题

Usage

npm install --save connect-history-api-fallback

Import the library

var history = require('connect-history-api-fallback');

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('/person', (req, res) => 
    res.send(
        name: 'zhang',
        age: 20
    )
)
app.listen(5000, (err) => 
    if (!err) console.log('服务器启动了');
)