本文具体重点介绍怎么解决浏览器路由(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('服务器启动成功!')})