Vue項目打包部署的方法是什么？動力節(jié)點小編來告訴大家。Vue項目打包部署本身不復雜，不過一些前端同學可能對服務(wù)器接觸不多，部署過程中還是會遇到這樣那樣的問題。本文介紹一下使用nginx服務(wù)器代理前端項目的方法以及項目部署的相關(guān)問題。

準備工作——服務(wù)器和nginx配置使用

1.準備一臺服務(wù)器

一般我們在布署時，服務(wù)器已經(jīng)開通好了，我們進入nginx服務(wù)器配置就好了。

2.安裝nginx

一般而言，nginx后端會安裝好。我們在此熟悉一下安裝過程

# 安裝
sudo apt-get install nginx
#安裝完成后使用nginx -v檢查，如果輸出nginx的版本信息表明安裝成功
# 啟動
sudo service nginx start

啟動后，正常情況下，直接訪問`http://服務(wù)器ip`或`http://域名`。如果出現(xiàn)`Welcome to nginx!`的頁面，說明成功了!

3.nginx配置文件`nginx.conf`

linux系統(tǒng)下的配置文件通常會存放在/etc目錄下，nginx的配置文件就在/etc/nginx文件夾，打開文件/etc/nginx/nginx.conf。

如圖所示：

可以看到默認情況下，nginx代理的根目錄是/var/www/html，輸入`http://服務(wù)器ip`會訪問這個文件夾下的文件，然后會根據(jù)index的配置值來找默認訪問的文件，比如index.html、index.htm之類。

我們可以更改root的值來修改nginx服務(wù)代理的文件夾：

(1)創(chuàng)建文件夾/www，并創(chuàng)建index.html，寫入"Hello world"字符串

mkdir /www
echo 'Hello world' > /www/index.html

(2)修改root值為 /www

(3)sudo nginx -t 檢查nginx配置是否正確

 如果出現(xiàn)successfull，說明成功

(4)重啟nginx

nginx配置好后，要重啟才生效

nginx -s reload

(5)再次訪問頁面，發(fā)現(xiàn)頁面內(nèi)容已經(jīng)變成了我們創(chuàng)建的index.html,里面內(nèi)容是Hello World

Vue項目打包并同步文件到服務(wù)器

1.打包

一般情況下，使用vue-cli創(chuàng)建的項目，package.json里的script應該已經(jīng)配置了build指令，直接執(zhí)行

yarn build

或者

npm run build

`build`命令默認是打包生產(chǎn)環(huán)境，如果想指定環(huán)境可以這樣配置：

"build:stage": "vue-cli-service build --mode staging",// 測試環(huán)境
"build:prod": "vue-cli-service build --mode production", // 生產(chǎn)環(huán)境

2. 同步到遠程服務(wù)器

我們使用nginx部署Vue項目，實質(zhì)上就是將Vue項目打包后的內(nèi)容同步到nginx指向的文件夾。之前的步驟已經(jīng)介紹了怎樣配置nginx指向我們創(chuàng)建的文件夾，剩下的問題就是怎么把打包好的文件同步到服務(wù)器上指定的文件夾里，比如同步到之前步驟中創(chuàng)建的/www。

同步文件可以在git-bash或者powershell使用scp指令，如果是linux環(huán)境開發(fā)，還可以使用rsync指令:

scp -r dist/* root@ip地址:/www
或
rsync -avr --delete-after dist/* root@ip地址:/www

注意這里以及后續(xù)步驟是使用root用戶遠程同步，應該根據(jù)你的具體情況替換root和ip(ip換為你自己的服務(wù)器IP)。

為了方便，可以在package.json腳本中加一個push命令，以使用yarn為例(如果你使用npm，則push命令中yarn改成npm run即可)：

"scripts": {
    "build": "vue-cli-service build",
    "push": "npm run build && scp -r dist/* root@ip地址:/www"
  },

這樣就可以直接執(zhí)行yarn push 或者npm run push直接發(fā)布了。不過還有一個小問題，就是命令執(zhí)行的時候要求輸入遠程服務(wù)器的root密碼(這里使用root來連接遠程的，你可以用別的用戶)。

3.同步ssh key

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

(1)生成ssh key：使用git bash或者powershell執(zhí)行`ssh-keygen`可以生成ssh key。會詢問生成的key存放地址，直接回車就行，如果已經(jīng)存在，則會詢問是否覆蓋。然后會讓你輸入私鑰的密碼，直接回車就行(如果設(shè)置了私鑰密碼，每次打包上傳還要輸這個密碼;如果設(shè)置了后期也可以取消)。

(2)回車后就會生成一對密鑰，并存放在你指定的文件夾下

(3)id_rsa是私鑰，id_rsa.pub是相對應的公鑰

(4)使用ssh-copy-id指令同步ssh key到遠程服務(wù)器，同步的是公鑰

ssh-copy-id -i ~/.ssh/id_rsa.pub root@服務(wù)器IP地址

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

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

路由為history時的布署

我們知道vue中路由有兩種模式，hash和history，默認是hash。

hash就是URL中會包含一個#號的這種形式。#號以及之后的內(nèi)容是路由地址的hash部分。

正常情況下，當瀏覽器地址欄地址改變，瀏覽器會重新加載頁面，而如果是hash部分修改的話，則不會重新加載，這就是前端路由的原理，即允許根據(jù)不同的路由頁面局部更新而不刷新整個頁面。H5新增了history的pushState接口，也允許前端操作改變路由地址但是不觸發(fā)頁面刷新，history模式即利用這一接口來實現(xiàn)。因此使用history模式可以去掉路由中的#號。

上圖為實際項目中的history模式配置。比hash模式多了句代碼。如果大家對此比較感興趣，想了解更多相關(guān)知識，不妨來關(guān)注一下動力節(jié)點的Vue js視頻教程，里面的課程內(nèi)容細致全面，通俗易懂，適合小白學習，希望對大家能夠有所幫助哦。