使用容器进行 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 正常工作

在文本编辑器中打开 `src/App.vue` 文件。
找到以下行
<HelloWorld msg="You did it!" />

更改为

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

保存文件。
在浏览器中打开 https://:5173。

你应该会立即看到更新的文本出现，而无需手动重建容器。这确认了文件监视和自动同步按预期工作。

摘要

在本节中，您使用 Docker 和 Docker Compose 为您的 Vue.js 应用程序设置了完整的开发和生产工作流程。

您取得了以下成果：

创建了 Dockerfile.dev 以简化带有热重载的本地开发
在 `compose.yaml` 文件中定义了独立的 `vuejs-dev` 和 `vuejs-prod` 服务。
使用 Compose Watch 启用了实时文件同步，以获得更流畅的开发体验
通过修改和预览组件验证了实时更新的无缝工作

通过此设置，您现在可以在容器内完全构建、运行和迭代您的 Vue.js 应用程序——在不同环境中高效且一致。

通过这些指南，加深你的知识并改进你的容器化开发工作流

使用 Compose Watch – 在开发过程中自动同步源更改
多阶段构建 – 创建高效、生产就绪的 Docker 镜像
Dockerfile 最佳实践 – 编写干净、安全和优化的 Dockerfile。
Compose 文件参考 – 学习在 compose.yaml 中配置服务的完整语法和可用选项。
Docker 卷 – 在容器运行之间持久化和管理数据

后续步骤

在下一节中，您将学习如何在 Docker 容器中运行 Vue.js 应用程序的单元测试。这确保了所有环境中的一致测试，并消除了对本地机器设置的依赖。