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

history路由解决刷新出现404的问题_history 404-CSDN博客
本文具体重点介绍怎么解决浏览器路由（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文件：

    // 引入 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

    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('服务器启动成功！')
    })