解决路由history模式刷新404的问题

url的hash值

• #及其后面的内容就是hash值 例如： \http://....../#/home/usermanagement
• hash值不会带给服务器

hash模式

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

history模式

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

解决方式

需要后端配合解决

使用node部署服务器的方式

1. 目录

2. 需要使用到的外部包：

   npm i express npm i connect-history-api-fallback

3. 将打包好的项目文件放入static静态文件夹里

4. server.js:

// 导入 express
const express = require('express')
const history = require('connect-history-api-fallback')
// 创建服务器的实例对象
const app = express()
//注册解决history路由刷新404问题的中间件 必须在静态目录之前注册
app.use(history())
const path = require('path');

//注册静态目录
app.use(express.static(path.join(__dirname, 'static')));

//获取本机ip
function getLocalIP() {
    const os = require('os');
    const ifaces = os.networkInterfaces();
    let ip = '';
    for (let dev in ifaces) {
        for (let i = 0; i < ifaces[dev].length; i++) {
            if (!ifaces[dev][i].internal && ifaces[dev][i].family === 'IPv4' && !ifaces[dev][i].address.includes('::') && ifaces[dev][i].address !== '127.0.0.1') {
                ip = ifaces[dev][i].address;
                break;
            }
        }
    }
    return ip;
}

app.listen(8080, () => {
    let host = getLocalIP()
    console.log(`服务器成功启动 请访问：http://127.0.0.1:8080 OR http://${host}:8080`)
})