1.安裝好 nginx 。
2. 把 vue 項目的源碼克隆到確定目錄下。用 git 管理，所以直接 git clone 到既定目錄就行了。
如我的目錄是：/root/jiangyu/projects/gentle_vue/gentle_vue_code 。
3. 項目打包：
npm run build
復(fù)制
會自動生成 dist 文件夾 。
4. 在任意目錄下新建文件 dockerfile 。內(nèi)容如下：
# 設(shè)置基礎(chǔ)鏡像
FROM nginx
# 定義作者
MAINTAINER jiangyu
# 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/ /usr/share/nginx/html/
復(fù)制
5. 構(gòu)建鏡像：
# -t 是給鏡像取名。
# 最后有一個點 “.”，表示使用當(dāng)前路徑下的 dockerfile 文件，也可以指定使用其它路徑的。
docker build -t gentle-vue .
復(fù)制
查看新生成的鏡像：
docker images
復(fù)制
6.啟動容器：
# -p ：配置端口映射，格式是外部訪問端口：容器內(nèi)端口
# -d ：后臺運(yùn)行
# --name : 給容器取名
# 最后有 2 個 gentle-vue,前面一個是給容器取的名字，后面一個是使用的鏡像的名字
docker run -p 3000:80 -d --name gentle-vue gentle-vue
復(fù)制
查看是否運(yùn)行成功：
7. 瀏覽器訪問：http://服務(wù)器IP:3000/#/
這就是我項目的測試頁面。 OK 了。
--------------------------
2018.11.28 后記：
每次修改都要重新 部署太麻煩 ，于是寫了個很簡單的腳本，運(yùn)行就部署：
腳本內(nèi)容只是把以上命令整合到一起執(zhí)行：
# 備份原代碼
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 ./
# 構(gòu)建鏡像
docker build -t gentle-vue .
echo -e "\033[32m\n新鏡像構(gòu)建成功\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"
復(fù)制
這樣部署就方便多了。文章來源：http://www.zghlxwxcb.cn/news/detail-637850.html
另后端工程部署方式見：Docker 部署應(yīng)用、jar 工程 docker 方式部署文章來源地址http://www.zghlxwxcb.cn/news/detail-637850.html
到了這里，關(guān)于Docker 方式 部署 vue 項目 （docker + vue + nginx）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
