history路由解决刷新出现404的问题

引言：

路由的两种工作模式为：哈希（hash）路由和浏览器(history)路由，大致区别如下：

 具体介绍可以看上一篇文章 

本文具体重点介绍怎么解决浏览器路由（history模式）解决404的问题。

        在项目打包上线时，如果采用的是哈希模式，不会出现404，原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。

具体流程（哈希模式）：

1. 前端项目写完之后，把src件夹打包 (利用webpack、babel把项目里面的jsx / vue 、scss文件变异成js、css和html)，命令如下

npm run build

完成之后会出现 dist 文件夹，里面包含：

 该html文件需部署在服务器上才能正常显示（只有一个html文件，是因为项目本身是SPA），

新建static文件夹，将dist里面的文件放入static。

2. 搭建服务器

        新建一个文件夹用vscode打开后，

npm init

// 然后设置 package name，回车

npm i express

接着新建 server.js文件：

// common.js 规范
    
    // 引入 express
    const express = require('express')
    // 利用中间件 给服务器指定静态资源（打包后的项目文件）
    app.use(express.static(__dirname+'/static'))
    // 新建实例
    const app = express()
    // 配置后端路由
    app.get('/person',(request,response)=>{
    // 给浏览器返回的信息
        response.send({
            name:'tom',age:19
})
})
    // 开启监听
    app.listen(5005,(err)=>{
    if(!err) conslole.log('服务器启动成功！')
})

3. 启动服务器

node server

可以看到： 

浏览器输入localhost：5005/person ，查看信息：

history 模式下刷新出现 404解决 

         1. 根据前端发送的请求以及后端已有的资源路径做判断（正则）匹配，区分哪些是前端路由哪些是后端路由。

        2. nginx 中间代理区分前后端路由

        3. node.js提供的中间件Connect

npm instal connect-history-api-fallback

// common.js 规范
    
    // 引入 express
    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',(request,response)=>{
    // 给浏览器返回的信息
        response.send({
            name:'tom',age:19
})
})
    // 开启监听
    app.listen(5005,(err)=>{
    if(!err) conslole.log('服务器启动成功！')
})