1.下載docker desktop軟件
Docker Desktop啟動的時候，有可能彈框提示"WSL2 installations is incomplete"，這是您的系統中沒有安裝WSL2內核的原因，打開【https://aka.ms/wsl2kernel ,在打開的頁面中有一個Linux內核更新包"鏈接，點擊下載，安裝。
2.更新wsl
在powershell中使用管理員權限運行
wsl --update
wsl --list --online 查看可以使用的虛擬機
wsl install xxx下載
3.啟動docker desktop
如果遇到問題可以參考
【已解決】win10系統 Docker 提示Docker Engine stopped解決全過程記錄-CSDN博客
其中關鍵的部分是要開啟電腦的虛擬化功能，在bios中打開即可，課直接百度如何通過bios打開電腦的虛擬化功能
4.在vue 項目的根目錄下創建dockerfile文件和nginx.conf文件
我們要明確vue項目打包后是靜態資源
需要依托于服務進行暴露訪問
這里我們使用nginx服務器即可
dockerfile文件內容
FROM nginx
LABEL Author='SZ'
COPY dist /usr/web/dist
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]nginx.conf文件
events {use epoll;worker_connections 65535;multi_accept on;}
http {include /etc/nginx/mime.types;default_type application/octet-stream;# 這里是其他http相關的配置，比如upstream定義等server {listen 9090;server_name localhost;location / {root /usr/web/dist;index index.html index.htm;try_files $uri $uri/ /index.html;}# 還可以有其他location塊或者其他配置}#
}5.使用docker build -t name .命令創建鏡像
注意docker build -t name后面的空格+.不能省略
這個代表設置當前創建鏡像的文件目錄上下文
docker會在當前目錄下尋找dockerfile文件
6.對vue項目打包
yarn build
生成dist文件夾
7.構建docker鏡像
運行
docker build -t my-vue-app .
出現以下畫面代表鏡像生成成功
8.運行鏡像
docker run -d -p 9090:9090 --name myvuecon my-vue-app
啟動命令說明：
- -d 參數表示以守護進程模式運行容器。
- -p 8080:80 參數用于端口映射，將主機的8080端口映射到容器內部的80端口。
- --name mycontainer 給容器命名為mycontainer。
- myimage 是你要運行的Docker鏡像的名稱。
此畫面代表運行成功并且返回了容器id
通過docker desktop也可以看到
8.訪問
空間)
