快捷導(dǎo)航

Vue項(xiàng)目打包部署總結(jié)篇

更新時(shí)間：2024年08月07日 09:02:07 作者：前端歐陽(yáng)

這篇文章主要介紹了Vue項(xiàng)目打包部署總結(jié)篇,關(guān)于Vue項(xiàng)目發(fā)布的相關(guān)問題就先總結(jié)這么多,幾乎在每一步都踩過坑才有所體會(huì),有問題歡迎各位同學(xué)一起探討,需要的朋友可以參考下

Vue項(xiàng)目打包部署總結(jié)

“scripts”: {
“build”: “vue-cli-service build”,
“push”: “yarn build && scp -r dist/* root@117.78.4.26:/www”
},

這樣就可以直接執(zhí)行yarn push 或者npm run push直接發(fā)布了。不過還有一個(gè)小問題，就是命令執(zhí)行的時(shí)候要求輸入遠(yuǎn)程服務(wù)器的root密碼（這里使用root來連接遠(yuǎn)程的，你可以用別的用戶，畢竟root用戶權(quán)限太高了）。

為了避免每次執(zhí)行都要輸入root密碼，我們可以將本機(jī)的ssh同步到遠(yuǎn)程服務(wù)器的authorized_keys文件中。

同步ssh key

生成ssh key：使用git bash或者powershell執(zhí)行ssh-keygen可以生成ssh key。會(huì)詢問生成的key存放地址，直接回車就行，如果已經(jīng)存在，則會(huì)詢問是否覆蓋：

同步ssh key到遠(yuǎn)程服務(wù)器，使用ssh-copy-id指令同步

ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

輸入密碼后，之后再次同步就不需要輸入密碼了。其實(shí)ssh_key是同步到了服務(wù)器（此處是root用戶家目錄）~/.ssh/authorized_keys文件里：

當(dāng)然你也可以手動(dòng)復(fù)制本地/.ssh/id_rsa.pub（注意是pub結(jié)尾的公鑰）文件內(nèi)容**追加**到服務(wù)器/.ssh/authorized_keys的后面（從命名可以看出該文件可以存儲(chǔ)多個(gè)ssh key）

注意：這里全程使用的是root用戶，所以沒有文件操作權(quán)限問題。如果你的文件夾創(chuàng)建用戶不是遠(yuǎn)程登錄用戶，或許會(huì)存在同步文件失敗的問題，此時(shí)需要遠(yuǎn)程服務(wù)器修改文件夾的讀寫權(quán)限（命令 chmod）。

創(chuàng)建了一個(gè)測(cè)試項(xiàng)目（點(diǎn)擊本鏈接可以在gihub查看）[1]試一下，打包、文件上傳一句指令搞定啦：

Vue項(xiàng)目打包發(fā)布問題匯總

訪問一下，果然看到了我們熟悉的界面：

Vue項(xiàng)目打包發(fā)布問題匯總

至此，常規(guī)情況下發(fā)布Vue項(xiàng)目就介紹完了，接下來介紹非域名根路徑下發(fā)布以及history路由模式發(fā)布方法。

非域名根路徑發(fā)布

有時(shí)候同一臺(tái)服務(wù)器同一端口下可能會(huì)根據(jù)目錄劃分出多個(gè)不同的項(xiàng)目，比如我們希望項(xiàng)目部署到http://a.com/test下，這樣訪問http://a.com/test訪問到的是項(xiàng)目的首頁(yè)，而非test前綴的地址會(huì)訪問到其它項(xiàng)目。此時(shí)需要修改nginx配置以及Vue打包配置。

1. nginx配置

只需要添加一條location規(guī)則，分配訪問路徑和指定訪問文件夾。我們可以把/test指向之前創(chuàng)建的/www文件夾，這里因?yàn)槲募A名稱和訪問路徑不一致，需要用到alias這個(gè)配置：

Vue項(xiàng)目打包發(fā)布問題匯總

如果文件夾名稱與訪問路徑一致都為test，那這里可以用root來配置：

Vue項(xiàng)目打包發(fā)布問題匯總

這里要將/test配置放到/之前，意味著在路由進(jìn)入的時(shí)候，會(huì)優(yōu)先匹配/test。如果根路徑/下的項(xiàng)目有子路由/test，那http://xxxx/test只會(huì)訪問到/www里的項(xiàng)目，而不會(huì)訪問該子路由。

2. 項(xiàng)目配置

為了解決打包后資源路徑不對(duì)的問題，需要在vue.config.js中配置publicPath，這里有兩種配置方式，分別將publicPath配置為./和/test：

Vue項(xiàng)目打包發(fā)布問題匯總

更新nginx配置，發(fā)布后即可正常訪問啦。這里的兩種配置方式是有區(qū)別的，接下來會(huì)看一下它們的區(qū)別。如果不進(jìn)行項(xiàng)目配置，直接發(fā)布訪問會(huì)出現(xiàn)JS、CSS等資源找不到導(dǎo)致頁(yè)面空白的問題：

Vue項(xiàng)目打包發(fā)布問題匯總

該問題原因是資源引用路徑不對(duì)，頁(yè)面審查元素可以看到，頁(yè)面引用的js都是從根路徑下引用的：

Vue項(xiàng)目打包發(fā)布問題匯總

查看打包后的文件結(jié)構(gòu)，可以看到j(luò)s/css/img/static等資源文件是與index.html處于同級(jí)別的：

Vue項(xiàng)目打包發(fā)布問題匯總

對(duì)于兩種配置方式，看看都是怎么生效的：

publicPath配置為./，打包后資源引用路徑為相對(duì)路徑：

publicPath配置為/test，打包后資源相對(duì)路徑為從域名根目錄開始的絕對(duì)路徑：

兩種配置都可以正確地找到JS、CSS等資源。不過還有個(gè)問題，那就是static中的靜態(tài)資源依舊會(huì)找不到。

3. 絕對(duì)路徑引用的靜態(tài)資源找不到的問題

因?yàn)樵诖虬^程中，public下的靜態(tài)資源都不會(huì)被webpack處理，我們需要通過絕對(duì)路徑來引用它們。當(dāng)項(xiàng)目部署到非域名根路徑上時(shí)，這點(diǎn)非常頭疼，你需要在每個(gè)引用的URL前面加上process.env.BASE_URL（該值即對(duì)應(yīng)上文配置的publicPath），以使得資源能被正常訪問到。我們可以在main.js把這個(gè)變量值綁定到Vue.prototype，這樣每個(gè)Vue組件都可以使用它：

Vue.prototype.$pb = process.env.BASE_URL

在模板中使用：

然而，更加頭疼并且沒有良好解決方案的問題是在組件style部分使用public文件夾下的靜態(tài)資源：

如果需要使用圖片等作為背景圖片等，盡量使用內(nèi)聯(lián)方式使用吧，像在模板中使用一樣。

如果需要引入樣式文件，則在index.html中使用插值方式引入吧。

關(guān)于靜態(tài)資源的問題，vue-cli的推薦是盡量**將資源作為你的模塊依賴圖的一部分導(dǎo)入（即放到assets中，使用相對(duì)路徑引用），**避免該問題的同時(shí)也帶來其它好處：

history模式部署

默認(rèn)情況下，Vue項(xiàng)目使用的是hash路由模式，就是URL中會(huì)包含一個(gè)#號(hào)的這種形式。#號(hào)以及之后的內(nèi)容是路由地址的hash部分。正常情況下，當(dāng)瀏覽器地址欄地址改變，瀏覽器會(huì)重新加載頁(yè)面，而如果是hash部分修改的話，則不會(huì)，這就是前端路由的原理，允許根據(jù)不同的路由頁(yè)面局部更新而不刷新整個(gè)頁(yè)面。H5新增了history的pushState接口，也允許前端操作改變路由地址但是不觸發(fā)頁(yè)面刷新，history模式即利用這一接口來實(shí)現(xiàn)。因此使用history模式可以去掉路由中的#號(hào)。

1. 項(xiàng)目配置

在vue-router路由選項(xiàng)中配置mode選項(xiàng)和base選項(xiàng)，mode配置為’history’；如果部署到非域名根目錄，還需要配置base選項(xiàng)為前文配置的publicPath值（注意：此情況下，publicPath必須使用絕對(duì)路徑/test的配置形式，而不能用相對(duì)路徑./）

Vue項(xiàng)目打包發(fā)布問題匯總

2. nginx配置

對(duì)于history模式，假設(shè)項(xiàng)目部署到域名下的/test目錄，訪問http://xxx/test/about的時(shí)候，服務(wù)器會(huì)去找/test指向的目錄下的about子目錄或文件，很顯然因?yàn)槭菃雾?yè)面應(yīng)用，并不會(huì)存在a這個(gè)目錄或者文件，就會(huì)導(dǎo)致404錯(cuò)誤：

Vue項(xiàng)目部署后頁(yè)面找不到

我們要配置nginx讓這種情況下，服務(wù)器能夠返回單頁(yè)應(yīng)用的index.html，然后剩下的路由解析的事情就交給前端來完成即可。

history模式nginx配置

這句配置的意思就是，拿到一個(gè)地址，先根據(jù)地址嘗試找對(duì)應(yīng)文件，找不到再試探地址對(duì)應(yīng)的文件夾，再找不到就返回/test/index.html。再次打開剛才的about地址，刷新頁(yè)面也不會(huì)404啦：

Vue項(xiàng)目打包發(fā)布問題匯總

3. history模式部署到非域名根路徑下

非域名根目錄下部署，首先肯定要配置publicPath。需要注意的點(diǎn)前面其實(shí)已經(jīng)提過了，就是這種情況下不能使用相對(duì)路徑./或者空串配置publicPath。為什么呢？原因是它會(huì)導(dǎo)致router-link等的表現(xiàn)錯(cuò)亂，使用測(cè)試項(xiàng)目[2]分別使用兩種配置打包發(fā)布，審查元素就能看出區(qū)別。在頁(yè)面上有兩個(gè)router-link，Home和About：

Vue項(xiàng)目打包發(fā)布問題匯總

兩種配置打包后的結(jié)果如下。

publicPath配置為./或者空串：

publicPath配置為/test：

publicPath配置為相對(duì)路徑的router-link打包后地址變成了相對(duì)根域名下地址，很明顯是錯(cuò)誤的，所以非域名根路徑部署應(yīng)該將publicPath配置為完整的前綴路徑。

結(jié)語(yǔ)

關(guān)于Vue項(xiàng)目發(fā)布的相關(guān)問題就先總結(jié)這么多，幾乎在每一步都踩過坑才有所體會(huì)，有問題歡迎各位同學(xué)一起探討。寫博客很累，不過收獲也很多，還是要堅(jiān)持；有時(shí)候別人轉(zhuǎn)載自己的原創(chuàng)文章也不標(biāo)明出處，竟然將寫文章日期改得比原創(chuàng)還早，有點(diǎn)心累。本文中使用到的圖片都加了個(gè)自己的水印，是前端實(shí)現(xiàn)的，原理也很簡(jiǎn)單，之后寫一篇簡(jiǎn)短的文章分享一下。