zoukankan      html  css  js  c++  java
  • node部署react/react-router静态文件路由问题

    今天又又又踩坑。。每天都在踩坑的路上不停歇。。

    昨天将webpack开发模式(webpack-dev-server以及热更新)和打包都完成了,今天又有新要求。

    因为react-router基于browserHistory写的,自己还readme里友情提示了一下本地处理需要用hashHistory,结果就被怼了。不允许修改源代码。。那我就开始头痛了,因为browserHistory下打包好的静态文件访问就疯狂报错。

    度娘上查了一番 说法都是browserHistory需要服务器的支持。然后大哥又发话了:没说一定不用服务器。。那就用node来部署一下静态文件好了。

    app.use(express.static(path.resolve(__dirname, '../build')))

    通过app.use将静态文件传到node服务器上,打开监听的http://localhost:8080/ 发现网页出来了跳转到http://localhost:8080/login,暗自以为可以了,结果手贱按了一下刷新,报错开始:Cannot GET /login

    node找不到这个路由,又开始头痛,因为自己在前端用react-router写了路由,node识别不出来,查了一下发现,node的路由优先级大于react-router路由。

    那么前面只是将静态资源上传上去了,访问http://localhost:8080/login时,node找不到/login这个路由,更找不到index.html这个页面,那么我们需要将这个页面传上去,让前端去对路由进行识别

    app.use(express.static(path.resolve(__dirname, '../build')))
    app.use(function(req, res){
      res.sendFile(path.resolve(__dirname, '../build/index.html'));
    })

    再启动,刷新 ok完事

  • 相关阅读:
    .net 调用命令行进行解压缩
    《jQuery实战》第1章 引荐JQuery
    将指定URL文件下载到指定服务器
    Oracle学习笔记
    Spring3 AOP的使用
    Field类使用以及getDeclaredFields方法
    spring 3的使用
    Json数据类型
    RotateAnimation详解
    GsonJava对象生成Json串
  • 原文地址:https://www.cnblogs.com/chengquanomg/p/11452866.html
Copyright © 2011-2022 走看看