react项目部署到子目录下踩坑经过

前端项目基于create-react-app搭建，后端代理用nginx。

需求

将多个前端项目部署在同一个域名下的不同路径下。例如：a项目部署在http://myapp.com/a，b项目部署在http://myapp.com/b。

遇到的问题：

1、控制台报错Uncaught SyntaxError: Unexpected token <

原因：js文件返回错误。
打开控制台查看js文件返回内容，发现格式为text/html,内容是index.html页面。这是因为js请求路径不对，导致nginx把js文件请求也重定向到返回index.html。
由于之前的项目都是部署在根路径下，js文件的请求自然是去根路径下寻找，但是现在项目部署到了子目录，所以前端的资源路径也应该做调整，这里需要修改webpack的publicPath的值，我们开发环境下这个值默认为"/"，生产环境下这个值会使用package.json中的homepage字段的值，如果没有homepage字段，则默认为"/"。这里我们在package.json里添加"homepage": "/a"(假设我们需要部署到/a子目录下)。

2、图片资源404

图片资源使用场景：
（1）、js文件内img标签
（2）、css背景图

第一种图片使用场景

由于之前没有考虑部署到子目录，所以图片路径都写成了绝对路径，例如：，这些图片都存放在public目录下的imgs文件夹内。webpack打包时会把public内的文件全部复制一份到打包后的目录内，所以在本地开发和部署到根路径下的时候，这样访问图片是可以的，但是当项目部署在子路径下时(例如:/a子路径)，这时候打包的文件都在/a目录下，根路径下是不存在imgs这个文件夹的。修改为：import xx from "@/imgs/xx.png"(这里的@是在webpack配置里添加的别名，用来代替"src目录")，这里需要把public/imgs内你用到的图片资源拷贝到src/imgs这个目录下。这样webpack打包时就会正确解析出图片的引用路径。

第二种图片使用场景

css背景图的图片url属性，之前也是写的根路径:"/imgs/xx.png"，这样写webpack在打包时候不会去解析图片路径，直接原样打包。修改为相对路径后解决。