一、打包vue項(xiàng)目

在開發(fā)完的vue項(xiàng)目輸入如下命名，打包生成dist文件夾

yarn build / npm run build

此時(shí)根目錄會(huì)多出一個(gè)文件夾：dist文件夾，里面就是我們要發(fā)布的東西。

如果將該dist目錄整個(gè)傳到服務(wù)器上，部署成靜態(tài)資源站點(diǎn)就能直接訪問(wèn)到該項(xiàng)目。

二、獲取nginx 鏡像

nginx 是一個(gè)高性能的HTTP和反向代理服務(wù)器，此處我們選用 nginx 鏡像作為基礎(chǔ)來(lái)構(gòu)建我們的vue應(yīng)用鏡像。

在終端輸入：

docker pull nginx

即可以獲取到nginx鏡像。

Docker鏡像是一個(gè)特殊的文件系統(tǒng)，除了提供容器運(yùn)行時(shí)所需的程序、庫(kù)、資源、配置等文件外，還包含了一些為運(yùn)行時(shí)準(zhǔn)備的一些配置參數(shù)（如匿名卷、環(huán)境變量、用戶等）。 鏡像不包含任何動(dòng)態(tài)數(shù)據(jù)，其內(nèi)容在構(gòu)建之后也不會(huì)被改變。

　 在終端輸入如下命令，可以看到nginx的鏡像

docker image ls

鏡像結(jié)果如下所示：

三、創(chuàng)建 nginx config配置文件

在項(xiàng)目根目錄下創(chuàng)建nginx文件夾，該文件夾下新建文件default.conf

server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; error_log /var/log/nginx/error.log error; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; }}

注意⚠️：如果vue-router使用的是history模式，try_files $uri $uri/ /index.html; 非常重要?。?！

因?yàn)槲覀兊膽?yīng)用是單頁(yè)客戶端應(yīng)用，如果后臺(tái)沒(méi)有正確的配置，當(dāng)用戶在瀏覽器訪問(wèn)地址時(shí)，就會(huì)返回404。

所以需要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源，如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè)index.html頁(yè)面，這個(gè)頁(yè)面就是你app依賴的頁(yè)面。

上面的文件定義了首頁(yè)的指向?yàn)?/usr/share/nginx/html/index.html, 所以我們可以一會(huì)把構(gòu)建出來(lái)的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。

四、創(chuàng)建 Dockerfile 文件

# 設(shè)置基礎(chǔ)鏡像FROM nginx# 定義作者M(jìn)AINTAINER lihui <1107136746@qq.com># 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個(gè)目錄下面COPY dist/ /usr/share/nginx/html/#用本地的 default.conf 配置來(lái)替換nginx鏡像里的默認(rèn)配置COPY nginx/default.conf /etc/nginx/conf.d/default.conf

五、基于該Dockerfile構(gòu)建vue應(yīng)用鏡像

運(yùn)行如下命令，注意不要少了最后的“ . ”

docker build -t test .

-t 是給鏡像命名 ，test是生成鏡像的名字，. 是基于當(dāng)前目錄的Dockerfile來(lái)構(gòu)建鏡像。

基于vue的鏡像就生成好了！

以上就是Docker鏡像+nginx 部署 vue 項(xiàng)目的方法的詳細(xì)內(nèi)容，更多關(guān)于docker部署vue項(xiàng)目的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！