將前端Vue3項目打包成Docker鏡像并運行包括幾個主要步驟：項目打包、編寫Dockerfile、構建鏡像和運行容器。下面是一個基本的流程：

1. 項目打包

首先，確保你的Vue3項目可以正常運行和打包。在項目根目錄下執行以下命令來打包你的Vue3項目：

npm run build

這會創建一個dist/目錄，里面包含了用于生產環境的靜態文件。

2. 編寫Dockerfile

在你的Vue3項目根目錄下創建一個名為Dockerfile的文件，沒有文件后綴。這個文件用于定義如何構建Docker鏡像。以下是一個簡單的Dockerfile示例，它使用Nginx作為服務器來運行你的Vue3應用：

# 使用官方Nginx鏡像作為基礎鏡像
FROM nginx:alpine# 將dist目錄下的文件復制到容器中的/usr/share/nginx/html目錄下
COPY dist/ /usr/share/nginx/html/# 暴露80端口
EXPOSE 80# 使用Nginx運行Vue應用
CMD ["nginx", "-g", "daemon off;"]

這個Dockerfile做了以下幾件事：

• 從Docker Hub拉取輕量級的nginx:alpine鏡像作為基礎鏡像。
• 將打包后的Vue3項目（dist/目錄下的文件）復制到Nginx容器的靜態文件目錄下。
• 暴露容器的80端口，以便外部訪問。
• 運行Nginx服務器。

3. 構建Docker鏡像

在包含Dockerfile的目錄下，執行以下命令來構建Docker鏡像。這里<your-image-name>是你給鏡像起的名字：

docker build -t <your-image-name> .

4. 運行Docker容器

構建完成后，你可以使用以下命令來運行你的Vue3應用的Docker容器：

docker run -d -p 8080:80 <your-image-name>

這個命令會啟動一個容器，并將容器的80端口映射到宿主機的8080端口上。這樣，你就可以通過訪問宿主機的8080端口來訪問你的Vue3應用了。

修改自定義接口

如果你的Dockerfile中已經將暴露的端口設置為28888，而且在運行容器時也使用了這個端口，但是無法通過IP訪問應用，存在以下幾個問題：

1. Nginx配置未指定監聽28888端口

雖然你在Dockerfile中使用EXPOSE 28888指令來暴露了28888端口，但這只是Docker的一個聲明，實際上并不會改變Nginx的默認配置。Nginx默認監聽80端口，如果你想讓它監聽28888端口，你需要修改Nginx的配置文件。

解決方案：

• 創建一個nginx.conf文件（或者一個site-specific的配置文件），并確保配置了正確的監聽端口，例如：

server {listen 28888;location / {root   /usr/share/nginx/html;index  index.html index.htm;}
}

• 修改你的Dockerfile，將這個配置文件復制到Nginx的配置目錄中：

COPY nginx.conf /etc/nginx/conf.d/default.conf

2. 容器端口映射錯誤

確保你在運行容器時，端口映射是正確的。你提到已經使用了28888端口，但是確認一下是否正確使用了-p參數來映射端口，例如：

docker run -d -p 28888:28888 yixiao-blog-1.0.0

這條命令會將宿主機的28888端口映射到容器的28888端口上。

3. 防火墻/網絡配置問題

如果你的服務器或宿主機有防火墻或者網絡安全組規則，確保28888端口是開放的，允許外部訪問。

解決方案：

• 根據你的操作系統或云服務提供商的文檔，檢查并修改防火墻規則。

4. 容器內Nginx服務未正確啟動

雖然看起來容器正在運行，但有可能是Nginx沒有按預期啟動。可以查看容器的日志來確認：

docker logs <容器ID或名稱>

重新配置docker打包文件然后執行build命令，大鏡像運行即可~

最后博主最近在打造自己的網站歡迎查看雛形~

總結

以上步驟展示了如何將一個Vue3項目打包成Docker鏡像并運行。這只是一個基本的流程，根據你的具體需求，可能還需要對Dockerfile進行相應的調整。