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

天蒙蒙亮2023-12-06 8:09

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

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

具体流程（哈希模式）：

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

npm run build

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

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

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

搭建服务器

新建一个文件夹用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('服务器启动成功！')
    })

启动服务器

node server

可以看到：

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

history 模式下刷新出现 404解决

根据前端发送的请求以及后端已有的资源路径做判断（正则）匹配，区分哪些是前端路由哪些是后端路由。
nginx 中间代理区分前后端路由
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('服务器启动成功！')
    })