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

本文具体重点介绍怎么解决浏览器路由（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 规范

    // 引入 expressconst 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 规范
 

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