做的好的茶叶网站,wordpress frame,做义工的同城网站,上海市公共招聘网官网本文具体重点介绍怎么解决浏览器路由#xff08;history模式#xff09;解决404的问题。 在项目打包上线时#xff0c;如果采用的是哈希模式#xff0c;不会出现404#xff0c;原因是 url 中 # 号后面的内容不会发给后端当作资源路径请求服务器。
具体流程#xff08;哈…本文具体重点介绍怎么解决浏览器路由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 可以看到
浏览器输入localhost5005/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(服务器启动成功)})
