react项目部署到服务器,刷新页面报错的两个问题

前端使用react开发,通过create-react-app搭建react环境,通过npm run build生成的 build目录,使用nginx做为代理服务器。

项目在本地开发时,没有任何问题,部署到服务器上出现了2个问题。

问题一:开发的应用是单页面应用,从主页一步一步点击没有问题,一旦刷新或者直接在地址栏输入,都会出现报错,显示的是404,无法找到页面。

问题二:解决404后,刷新或者直接在地址栏输入,查看控制台提示:Uncaught SyntaxError: Unexpected token <,页面空白依然没有正常渲染出界面。

问题一:

路由使用了BrowserRouter : import { BrowserRouter as Router } from 'react-router-dom';

当请求https://www.ohlaa.com/xxx时,会到nginx下面找到该路径,然后加载index.html。现在切换到路由https://www.ohlaa.com/xxx/home,刷新页面后,实际请求的是xxx目录下home项目里的index.html,因此报错404。

解决方案1是:使用HashRouter 替换BrowserRouter ,缺点就是地址栏出现了#,看着不太爽。

import { HashRouter as Router, Route, Link } from 'react-router-dom';

解决方案2是:继续使用BrowserRouter ,但是要配置nginx服务器。

`    server {
    listen       80; #默认端口 也就是用户请求网站首页时使用的
    server_name  127.0.0.1 www.ohlaa.com;
    root /data/build;#项目前端使用 npm run build 命令生成的dist/build文件夹
    index index.html;
    location / {
      try_files $uri /index.html;
    }`

问题二:

问题一解决后,出现了第二个问题。页面依然渲染不出来,因为使用npm run build生成的build目录。原因就是生成的index.html引用的js文件路径不对。

<script src="./static/js/main.2a806527.chunk.js"></script>

多出来一个’.’,此时突然想起来,刚开始使用react的时候在package.json添加了一行代码"homepage": “.”。

修改为网站的网址"homepage": “http://www.qwe.com”,问题解决。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值