React+dva+ts+antd项目,build后上线服务器白屏问题解决

项目由dva-cli创建

打包线上包:

  npm run build

本地检查dist包(本人全局安装了http-server,所以直接启动,如果有自己server可以更换对应命令)

cd dist && http-server

检查OK没有问题,部署到服务器,注意本人没有部署到服务器根目录,而是部署到了一个二级目录下面


服务器是ngix服务器,所有服务对应有配置,要求所有资源指向都指向到dist/index.html里面,具体配置可以找服务端人员或者自己调试

server {
        listen       80;
        server_name  www.example.com;
        root   /path/to/xx/dist;
        location  / {
            index  index.html index.htm;
            try_files $uri $uri/ /index.html =404;
        }
        location * {
          try_files $uri $uri/ /index.html =404;
        }
}

然后访问地址:
https:// xxx.xxxx.com/dist/
发现打开后一片空白,页面也没有报错,如下图

白屏代码.png

然后有点懵逼了,配置了ngix代理了呀,本地打包测试也OK,这可咋整呢?

然后改为hash路由,再次上线服务器,然后访问,发现木有问题呀,那就不是代码问题了;怎么解决呢?

去dvajs的GitHub主页去找发现,也有人遇到相同问题,不过回答都不具体明细
我参考这个解决的https://github.com/dvajs/dva/issues/1650

解决办法一:

部署到服务器根目录;但是如果根目录是其他项目页面那么久没办法了,只有部署到二级目录了,二级目录久只有办法二了。

解决办法二:

因为使用的是 browserHistory ,默认 base 是 /,所以访问 http://domain/dist,base/dist,所以匹配不上。
配置base如下:

import { createBrowserHistory as createHistory } from "history";
const app = dva({
    history: createHistory({
        basename: "/dist"
    })
});

本人也通过办法二解决了,希望对大家有帮助!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、开发环境 首先,请安装 NodeJS。NodeJS 是一个 JS 执行环境,umi 基于 JS 编写,并且需要...
    Lia代码猪崽阅读 48,484评论 7 44
  • 人一生都在做选择,有时候对了,得一段坦途。有时候错了,不得已走上弯路。 2010年,雷军41岁,开始做小米手机。面...
    林飞悦来阅读 823评论 3 5
  • 朝阳升起,我们一如往常一样,跟随着太阳的脚步踏上了第七站的活动旅程——东区自来水厂。众所周知,水与我们的日常生活息...
    emmmmmm哦阅读 160评论 0 0
  • 初试成绩出来了 383分 考的不咋地 别人或许觉得还可以 但是它们不懂我 我的目标是400分 所以我有点难受 但是...
    宁不语阅读 185评论 0 0