前端項目基于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)境下這個值默認為"/"，生產(chǎn)環(huán)境下這個值會使用package.json中的homepage字段的值馆纳，如果沒有homepage字段诗良，則默認為"/"。這里我們在package.json里添加"homepage": "/a"(假設(shè)我們需要部署到/a子目錄下)鲁驶。
2鉴裹、圖片資源404
圖片資源使用場景：
（1）、js文件內(nèi)img標簽
（2）钥弯、css背景圖
第一種圖片使用場景
由于之前沒有考慮部署到子目錄径荔，所以圖片路徑都寫成了絕對路徑，例如：<img src="/imgs/xx.png" />脆霎，這些圖片都存放在public目錄下的imgs文件夾內(nèi)总处。webpack打包時會把public內(nèi)的文件全部復(fù)制一份到打包后的目錄內(nèi)，所以在本地開發(fā)和部署到根路徑下的時候睛蛛，這樣訪問圖片是可以的鹦马，但是當項目部署在子路徑下時(例如:/a子路徑)胧谈，這時候打包的文件都在/a目錄下，根路徑下是不存在imgs這個文件夾的荸频。修改為：import xx from "@/imgs/xx.png"(這里的@是在webpack配置里添加的別名第岖，用來代替"src目錄")，這里需要把public/imgs內(nèi)你用到的圖片資源拷貝到src/imgs這個目錄下试溯。這樣webpack打包時就會正確解析出圖片的引用路徑。
第二種圖片使用場景
css背景圖的圖片url屬性郊酒，之前也是寫的根路徑:"/imgs/xx.png"遇绞，這樣寫webpack在打包時候不會去解析圖片路徑，直接原樣打包燎窘。修改為相對路徑后解決摹闽。
