1、安裝docker desktop win10

2、安裝docker machine及配置

https://blog.csdn.net/acherson/article/details/101441753

3、安裝虛擬機器hyper-v

https://blog.csdn.net/fly_leopard/article/details/93481469

4、安裝nginx

我們部署Vue程式依賴Nginx，首先拉取Nginx的映象，這裡使用Nginx最新的映象

docker pull nginx

如圖所示

我們檢視映象

已經有了nginx映象。

我們根據nginx映象執行容器

docker run --name=nginx -d -p 4030:80 nginx

如圖所示

然後在瀏覽器裡面訪問4030埠，驗證容器是否執行正常

出現上面的截圖，說明容器執行正常。

三、建立Vue程式

1、建立專案

我們使用下面的命令建立一個Vue程式，這裡使用PowerShell建立

vue create docker-vue

建立過程省略，建立完成

使用VSCode開啟專案，然後執行執行命令

npm run serve

如圖所示

在瀏覽器裡面訪問

2、編譯專案

專案建立完成以後，我們編譯專案

npm run build

如圖所示

編譯完成之後，在專案的根目錄下面就會生成一個dist資料夾，裡面是編譯後的專案

3、新增Dockerfile檔案

我們要構建映象，必須依靠Dockerfile檔案，我們在專案的根目錄下面建立一個Dockerfile檔案，沒有後綴名，檔案內容如下

# 設定基礎映象，這裡使用最新的nginx映象，前面已經拉取過了
FROM nginx
# 定義作者 Edison
MAINTAINER Edison 
# 將dist檔案中的內容複製到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/  /usr/share/nginx/html/

4、上傳檔案

我們在Linux裡面的demo資料夾下面建立vue資料夾，然後把dist資料夾和Dockerfile檔案上傳到該目錄下

5、構建映象

檔案上傳以後，我們構建Vue程式的映象

docker build -t dockervue .

如圖所示

可以看到映象構建成功了。

6、執行容器

我們根據上步構建的映象去執行映象

docker run --name=dockervue -d -p 9020:80 dockervue

如圖所示

可以看到容器在執行，我們在瀏覽器裡面訪問9020埠

可以看到Vue程式使用Docker部署就成功了。