前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

1.安裝好 nginx 。

2. 把 vue 項目的源碼克隆到確定目錄下。用 git 管理，所以直接 git clone 到既定目錄就行了。

?如我的目錄是：/root/jiangyu/projects/gentle_vue/gentle_vue_code 。

3. 項目打包：

npm run build?

會自動生成 dist 文件夾 。

4. 在任意目錄下新建文件? dockerfile 。內容如下：

# 設置基礎鏡像 FROM nginx # 定義作者 MAINTAINER jiangyu # 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面 COPY dist/ /usr/share/nginx/html/

5. 構建鏡像：? ?

# -t 是給鏡像取名。 # 最后有一個點 “.”，表示使用當前路徑下的 dockerfile 文件，也可以指定使用其它路徑的。 docker build -t gentle-vue .

查看新生成的鏡像：

docker images

?

6.啟動容器：

# -p ：配置端口映射，格式是外部訪問端口：容器內端口 # -d ：后臺運行 # --name : 給容器取名 # 最后有 2 個 gentle-vue,前面一個是給容器取的名字，后面一個是使用的鏡像的名字docker run -p 3000:80 -d --name gentle-vue gentle-vue

查看是否運行成功：

7. 瀏覽器訪問：http://服務器IP:3000/#/

這就是我項目的測試頁面。 OK 了。

?

--------------------------

2018.11.28 后記：

每次修改都要重新 部署太麻煩 ，于是寫了個很簡單的腳本，運行就部署：

腳本內容只是把以上命令整合到一起執行：

# 備份原代碼 tar -zcvf gentle-vue.tar ./gentle-vue# 刪除原代碼文件夾 rm -rf gentle-vue# 拉取代碼 git clone https://gitee.com/FJ_WoMenDeShiJie/gentle-vue.git echo -e "\033[32m\n代碼拉取\n\033[0m"# 拷貝 node_modules cp ./node.tar ./gentle-vue# build 打包 vue 項目，生成 dist 文件夾 cd ./gentle-vue tar -zxvf node.tar npm run build echo -e "\033[32m\nvue項目打包完成\n\033[0m"# 刪除原鏡像 docker rmi gentle-vue &> /dev/null echo -e "\033[32m\n刪除原鏡像文件\n\033[0m"# 拷貝 dockerfile 到工程目錄下 cp ../dockerfile ./# 構建鏡像 docker build -t gentle-vue . echo -e "\033[32m\n新鏡像構建成功\n\033[0m"# 刪除原容器 docker rm -f gentle-vue# 啟動容器 docker run -p 3000:80 -d --name gentle-vue gentle-vue echo -e "\033[32m\n前端工程部署完成\n\033[0m"

這樣部署就方便多了。

另后端工程部署方式見：Docker 部署應用、jar 工程 docker 方式部署

總結

以上是生活随笔為你收集整理的Docker 方式 部署 vue 项目 （docker + vue + nginx）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。