Vue專案部署問題
三、非域名根路徑釋出
有時候同一臺伺服器同一埠下可能會根據目錄劃分出多個不同的專案，比如我們希望專案部署到http://a.com/test下，這樣訪問http://a.com/test訪問到的是專案的首頁，而非test字首的地址會訪問到其它專案。此時需要修改nginx配置以及Vue打包配置。
2、專案配置
為了解決打包後資源路徑不對的問題，需要在vue.config.js中配置publicPath，這裡有兩種配置方式，分別將publicPath配置為./和/test：
更新nginx配置，釋出後即可正常訪問啦。這裡的兩種配置方式是有區別的，接下來會看一下它們的區別。
如果不進行專案配置，直接釋出訪問會出現JS、CSS等資源找不到導致頁面空白的問題：
該問題原因是資源引用路徑不對，頁面審查元素可以看到，頁面引用的js都是從根路徑下引用的：
檢視打包後的檔案結構，可以看到js/css/img/static等資原始檔是與index.html處於同級別的
原因
檢視打包後的檔案結構，可以看到js/css/img/static等資原始檔是與index.html處於同級別的
對於兩種配置方式，看看都是怎麼生效的：
- publicPath配置為./， 打包後資源引用路徑為相對路徑：
- publicPath配置為/test，打包後資源相對路徑為從域名根目錄開始的絕對路徑：
兩種配置都可以正確地找到JS、CSS等資源。不過還有個問題，那就是static中的靜態資源依舊會找不到。
3、絕對路徑引用的靜態資源找不到的問題
因為在打包過程中，public下的靜態資源都不會被webpack處理，我們需要通過絕對路徑來引用它們。當專案部署到非域名根路徑上時，這點非常頭疼，你需要在每個引用的URL前面加上process.env.BASE_URL（該值即對應上文配置的publicPath），以使得資源能被正常訪問到。我們可以在main.js把這個變數值繫結到Vue.prototype，這樣每個Vue元件都可以使用它：
Vue.prototype.$pb = process.env.BASE_URL
在模板中使用：
<img :src="`${$pb}static/logo.png`">
然而，更加頭疼並且沒有良好解決方案的問題是在元件style部分使用public資料夾下的靜態資源：
- 如果需要使用圖片等作為背景圖片等，儘量使用內聯方式使用吧，像在模板中使用一樣。
- 如果需要引入樣式檔案，則在index.html中使用插值方式引入吧。
關於靜態資源的問題，vue-cli的推薦是儘量將資源作為你的模組依賴圖的一部分匯入（即放到assets中，使用相對路徑引用），避免該問題的同時也帶來其它好處：
四、history模式部署
預設情況下，Vue專案使用的是hash路由模式，就是URL中會包含一個#號的這種形式。#號以及之後的內容是路由地址的hash部分。
正常情況下，當瀏覽器位址列地址改變，瀏覽器會重新載入頁面，而如果是hash部分修改的話，則不會，這就是前端路由的原理，允許根據不同的路由頁面區域性更新而不重新整理整個頁面。
H5新增了history的pushState介面，也允許前端操作改變路由地址但是不觸發頁面重新整理，history模式即利用這一介面來實現。因此使用history模式可以去掉路由中的#號。
1、專案配置
在vue-router路由選項中配置mode選項和base選項，mode配置為'history'；如果部署到非域名根目錄，還需要配置base選項為前文配置的publicPath值（注意：此情況下，publicPath必須使用絕對路徑/test的配置形式，而不能用相對路徑./）
2、 nginx配置
對於history模式，假設專案部署到域名下的/test目錄，訪問http://xxx/test/about的時候，伺服器會去找/test指向的目錄下的about子目錄或檔案，很顯然因為是單頁面應用，並不會存在a這個目錄或者檔案，就會導致404錯誤：
我們要配置nginx讓這種情況下，伺服器能夠返回單頁應用的index.html，然後剩下的路由解析的事情就交給前端來完成即可。
這句配置的意思就是，拿到一個地址，先根據地址嘗試找對應檔案，找不到再試探地址對應的資料夾，再找不到就返回/test/index.html。再次開啟剛才的about地址，重新整理頁面也不會404啦：
3、history模式部署到非域名根路徑下
非域名根目錄下部署，首先肯定要配置publicPath。需要注意的點前面其實已經提過了，就是這種情況下不能使用相對路徑./或者空串配置publicPath。
為什麼呢？
原因是它會導致router-link等的表現錯亂，使用測試專案分別使用兩種配置打包釋出，審查元素就能看出區別。在頁面上有兩個router-link，Home和About：
兩種配置打包後的結果如下。
- publicPath配置為./或者空串：
- publicPath配置為/test：
publicPath配置為相對路徑的router-link打包後地址變成了相對根域名下地址，很明顯是錯誤的，所以非域名根路徑部署應該將publicPath配置為完整的字首路徑。