使用容器進行 Vue.js 開發

目錄

先決條件

完成容器化 Vue.js 應用程式。

概述

在本節中，您將使用 Docker Compose 為您的 Vue.js 應用程式設定生產和開發環境。這種方法簡化了您的工作流程——在生產環境中透過 Nginx 提供輕量級靜態站點，併為高效的本地開發提供一個快速、即時過載的開發伺服器（使用 Compose Watch）。

你將學習如何

  • 配置隔離環境：為生產和開發用例設定單獨最佳化的容器。
  • 開發中的即時過載：使用 Compose Watch 自動同步檔案更改，實現即時更新，無需手動干預。
  • 輕鬆預覽和除錯：在容器內進行開發，享受無縫的預覽和除錯體驗——每次更改後無需重新構建。

自動更新服務（開發模式）

利用 Compose Watch 在您的本地機器和容器化的 Vue.js 開發環境之間實現即時檔案同步。這個強大的功能消除了手動重建或重啟容器的需要，提供了一個快速、無縫、高效的開發工作流程。

透過 Compose Watch，您的程式碼更新會立即反映在容器內部——非常適合快速測試、除錯和即時預覽更改。

步驟 1：建立開發 Dockerfile

在專案根目錄中建立一個名為 Dockerfile.dev 的檔案，其內容如下

# =========================================
# Stage 1: Develop the Vue.js Application
# =========================================
ARG NODE_VERSION=23.11.0-alpine

# Use a lightweight Node.js image for development
FROM node:${NODE_VERSION} AS dev

# Set environment variable to indicate development mode
ENV NODE_ENV=development

# Set the working directory inside the container
WORKDIR /app

# Copy package-related files first to leverage Docker's caching mechanism
COPY package.json package-lock.json ./

# Install project dependencies
RUN --mount=type=cache,target=/root/.npm npm install

# Copy the rest of the application source code into the container
COPY . .

# Change ownership of the application directory to the node user
RUN chown -R node:node /app

# Switch to the node user
USER node

# Expose the port used by the Vite development server
EXPOSE 5173

# Use a default command, can be overridden in Docker compose.yml file
CMD [ "npm", "run", "dev", "--", "--host" ]

此檔案使用開發伺服器為您的 Vue.js 應用程式設定了一個輕量級開發環境。

步驟 2：更新你的 compose.yaml 檔案

開啟您的 `compose.yaml` 檔案並定義兩個服務：一個用於生產環境（`vuejs-prod`），一個用於開發環境（`vuejs-dev`）。

以下是 Vue.js 應用程式的配置示例：

services:
  vuejs-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-vuejs-sample
    ports:
      - "8080:8080"

  vuejs-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - path: ./src
          target: /app/src
          action: sync
        - path: ./package.json
          target: /app/package.json
          action: restart
        - path: ./vite.config.js
          target: /app/vite.config.js
          action: restart
  • `vuejs-prod` 服務使用 Nginx 構建並提供您的靜態生產應用程式。
  • `vuejs-dev` 服務執行您的 Vue.js 開發伺服器，支援即時過載和熱模組替換。
  • watch 觸發與 Compose Watch 的檔案同步。
注意

有關更多詳細資訊，請參閱官方指南：使用 Compose Watch。

完成上述步驟後，你的專案目錄現在應該包含以下檔案

├── docker-vuejs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

步驟 4：啟動 Compose Watch

從專案根目錄執行以下命令以在監視模式下啟動容器

$ docker compose watch vuejs-dev

步驟 5：使用 Vue.js 測試 Compose Watch

確認 Compose Watch 正常工作

  1. 在文字編輯器中開啟 `src/App.vue` 檔案。

  2. 找到以下行

    <HelloWorld msg="You did it!" />

  3. 更改為

    <HelloWorld msg="Hello from Docker Compose Watch" />

  4. 儲存檔案。

  5. 在瀏覽器中開啟 https://:5173。

你應該會立即看到更新的文字出現，而無需手動重建容器。這確認了檔案監視和自動同步按預期工作。

摘要

在本節中，您使用 Docker 和 Docker Compose 為您的 Vue.js 應用程式設定了完整的開發和生產工作流程。

您取得了以下成果：

  • 建立了 Dockerfile.dev 以簡化帶有熱過載的本地開發
  • 在 `compose.yaml` 檔案中定義了獨立的 `vuejs-dev` 和 `vuejs-prod` 服務。
  • 使用 Compose Watch 啟用了即時檔案同步，以獲得更流暢的開發體驗
  • 透過修改和預覽元件驗證了即時更新的無縫工作

透過此設定，您現在可以在容器內完全構建、執行和迭代您的 Vue.js 應用程式——在不同環境中高效且一致。

透過這些指南，加深你的知識並改進你的容器化開發工作流

後續步驟

在下一節中，您將學習如何在 Docker 容器中執行 Vue.js 應用程式的單元測試。這確保了所有環境中的一致測試，並消除了對本地機器設定的依賴。

在容器中執行 vue.js 測試 »