最近在弄一个react的项目，构建一个PC端的网站，通过一星期的加班总算完成了，最后只剩下打包上线就ok了。但是，偏偏在打包上出现了问题。
首先在使用npm run build 打包后，本地打开静态问价时，报错说js、css not found，打算看一下配置文件，看看打包路径的问题，这时发现，使用create-react-app生成的项目中并没有webpack的配置文件，这就很奇怪了。查了一些文档，发现这个配置文件其实是有的，只是隐藏了起来，接下来，我们使用npm run eject，让config目录自己出来。
这些文件具体功能就不赘述了，这里主要说一下paths.js，这个文件就是对打包的项目中一些资源路径配置文件，我们知道在webpack在引用依赖的时候是通过package.json然后加载node_modules中的东西去js中，所以在打包时，不可避免的必须会使用到package.json中的路径。现在我们来看这个path.js，其中暴露了一个对象，而这个对象中
这里顾名思义就是配置的服务器路径，我们去找getServedPath这个方法，发现其路径是"/"，这里将路径修改为相对路径"./"，这时候我们再打包一次试试，F12这时候没有报错，但是整个index.html是空白的，这又是什么状况？
重复整理思路，检查配置文件，最后发现浏览器地址栏，并没有渲染出我的路由，查看API后发现我使用的是BrowserRouter ，是使用浏览器的history对象去请求服务器，这需要服务器上有响应的控制器配置，所以很显然这是不可取的，于是我将路由改成了HashRouter，这是使用本地路由的hash值来切换路由的，简单点说就是在浏览器打开时，切换的路由部分之前需要使用“#”将主路由和hash参数分隔，具体的小伙伴们可以下来再看，做完这两步，基本上就没有什么问题了，接下来我重新打包测试，果然一切没有问题了。
网友评论