创建 Dockerfile

在Vue.js项目根目录下创建一个 Dockerfile 的文件

# 使用最新的官方 Node.js 镜像作为基础镜像，并命名为 `builder` 阶段
FROM node:latest AS builder

# 设置工作目录  
WORKDIR /app

# 将当前目录下的所有文件复制到容器的工作目录 `/app` 中
COPY . .

# 在容器中安装项目依赖
RUN npm install

# 在容器中构建项目
RUN npm run build

# 使用轻量级的官方 Nginx 镜像作为基础镜像
FROM nginx:alpine

# 时区
ENV TZ=Asia/Shanghai

# 本地的 `nginx.conf` 文件复制到容器的 `/etc/nginx/conf.d/default.conf`
COPY nginx.conf /etc/nginx/conf.d/default.conf

# `builder` 阶段中复制构建好的文件到 Nginx 容器的网页根目录 `/usr/share/nginx/html`
COPY --from=builder /app/dist /usr/share/nginx/html

创建 Nginx 配置文件

在Vue.js项目根目录创建一个 nginx.conf 文件

gzip on;

server {
   
    listen 80;
    server_name localhost;

    location / {
   
        # Vue.js应用目录
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
}

方法1: 使用 Docker 部署 Vue 项目

1. 构建 Docker 镜像

在Vue.js项目根目录下运行Docker构建镜像：

docker build -t vue-app:1.0 .

2. 运行 Docker 容器

运行你的Vue.js应用容器命令：

docker run -d --restart=always --name vue-app -p 5000:80 vue-app:1.0

方法2: 使用 Docker Compose 部署 Vue 项目

1. 创建 docker-compose.yml 文件

在项目根目录下创建一个名为 docker-compose.yml 的文件，内容如下：

version: '3.0'

services:
  vue-app:
    build:
      context: .
      dockerfile: Dockerfile
    image: vue-app
    container_name: vue-app
    restart: always
    environment:
      - TZ=Asia/Shanghai
    ports:
      - "5000:80"
    networks:
      - vue-network

networks:
  vue-network:

• version: 指定 Docker Compose 文件版本。
• services: 定义服务
  • vue-app: 定义服务名称。
    • build: 构建镜像时的配置。
      • context: 构建上下文目录。
      • dockerfile: 指定 Dockerfile 的文件名为 Dockerfile。
    • image: 生成的镜像名称。
    • container_name: 容器名称
    • environment: 设置容器的环境变量
      • TZ=Asia/Shanghai: 设置时区
    • ports: 端口映射设置
      • 5000:80: 将宿主机的 5000 端口映射到容器的 80 端口。
    • networks: 配置容器连接的网络。
      • vue-network: 加入 vue-network 网络。
• networks: 定义网络
  • vue-network: 定义一个名为 vue-network 的网络。

    2. 构建和运行 Docker 容器

    使用 Docker Compose 来构建和运行容器：

    docker compose up --build -d
    

    访问

    你的Vue.js应用应该可以通过浏览器访问了，地址为 http://localhost:5000。

    总结

    使用 Docker： 更适合单一应用的简单部署，步骤较少，但需要手动管理多个容器的网络和依赖关系。
    使用 Docker Compose： 更适合管理多服务应用，通过一个配置文件管理所有服务及其依赖，适合复杂应用的部署。
    这两种方式都能有效地部署 Vue 应用，选择哪种方式取决于你的具体需求和应用复杂性。