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

需求

將多個前端項目部署在同一個域名下的不同路徑下。例如：a項目部署在http://myapp.com/a，b項目部署在http://myapp.com/b。

遇到的問題：

1、控制臺報錯Uncaught SyntaxError: Unexpected token <

原因：js文件返回錯誤。
打開控制臺查看js文件返回內(nèi)容，發(fā)現(xiàn)格式為text/html,內(nèi)容是index.html頁面。這是因為js請求路徑不對，導(dǎo)致nginx把js文件請求也重定向到返回index.html。
由于之前的項目都是部署在根路徑下，js文件的請求自然是去根路徑下尋找，但是現(xiàn)在項目部署到了子目錄，所以前端的資源路徑也應(yīng)該做調(diào)整，這里需要修改webpack的publicPath的值，我們開發(fā)環(huán)境下這個值默認(rèn)為"/"，生產(chǎn)環(huán)境下這個值會使用package.json中的homepage字段的值，如果沒有homepage字段，則默認(rèn)為"/"。這里我們在package.json里添加"homepage": "/a"(假設(shè)我們需要部署到/a子目錄下)。

2、圖片資源404

圖片資源使用場景：
（1）、js文件內(nèi)img標(biāo)簽
（2）、css背景圖

第一種圖片使用場景

由于之前沒有考慮部署到子目錄，所以圖片路徑都寫成了絕對路徑，例如：<img src="/imgs/xx.png" />，這些圖片都存放在public目錄下的imgs文件夾內(nèi)。webpack打包時會把public內(nèi)的文件全部復(fù)制一份到打包后的目錄內(nèi)，所以在本地開發(fā)和部署到根路徑下的時候，這樣訪問圖片是可以的，但是當(dāng)項目部署在子路徑下時(例如:/a子路徑)，這時候打包的文件都在/a目錄下，根路徑下是不存在imgs這個文件夾的。修改為：import xx from "@/imgs/xx.png"(這里的@是在webpack配置里添加的別名，用來代替"src目錄")，這里需要把public/imgs內(nèi)你用到的圖片資源拷貝到src/imgs這個目錄下。這樣webpack打包時就會正確解析出圖片的引用路徑。

第二種圖片使用場景

css背景圖的圖片url屬性，之前也是寫的根路徑:"/imgs/xx.png"，這樣寫webpack在打包時候不會去解析圖片路徑，直接原樣打包。修改為相對路徑后解決。