React打包部署后页面二次刷新报错问题

前言

creat-react-app创建的项目，项目引用的路由框架是“react-router-dom”。打包部署后，部分如http://xxx/account/center这样的二级路径刷新报错，错误信息是Uncaught SyntaxError: Unexpected token <。

被这样问题搞了一上午，最后发现是homepage配置的锅。

• homepage的作用是设置应用的跟路径，我们的项目打包后是要运行在一个域名之下的，有时候可能是运行在跟域名下，也有可能运行在某个子域名下或或域名的某个目录下，这时候我们就需要让我们的应用知道去哪里加载资源，这时候就需要我们设置一个跟路径，而且有时候我们的资源会部署在 CDN 上，你必须告诉打包工具你的CDN地址是什么。

• 比如我们用 create-react-app 开发的 React 应用，以及 Vue CLI 开发的项目，默认是继承了 webpack 的，当不配置 homepage 属性，build 打包之后的文件资源应用路径默认是 /

参考文章

• homepage介绍

解决方案

1.将package.json里的

 "homepage": "."

改为

  "homepage": "/"

或直接删除

2.但这样会出现有些特殊部署会出现问题，这里暂时没有解决方法。我这边路由是用的BrowserRouter，部署代理是nginx。如果是直接放在spring boot上的建议还是用HashRouter