基于docker compose搭建vue开发环境

基于docker compose.yaml搭建vue开发环境

# 构建
docker compose build

# 启动
docker compose up -d

# 删除
docker compose down -v

# 日志
docker compose logs -f

基于webpack

 // 修改vue.config.js 或 /webpack.config.js （注意：open要设置false）
devServer: {
	...,
	watchOptions: {
	  aggregateTimeout: 1000,
	  poll: 3000,
	  ignored: /node_modules/,
	}
	...,
}

// 如果基于vue2 脚手架，可能需要安装依赖
// package.json
"scripts": {
	...,
	"dev": "vue-cli-service serve && webpack-dev-server --open",
}
...
"devDependencies": {
	"webpack-dev-server": "^3.11.2"
}

基于vite

server:{
	...,
	watch: {
		usePolling: true, // 启用轮询监视
		// 忽略对依赖文件的监听
		ignored: /node_modules/,
		// ignored: ['!**/node_modules/axios'],// 对 node_modules/ 内的包进行监听
	}
	....
}

• Dockerfile-dev文件

基础镜像

# 构建时变量
ARG NODE_VERSION=14.21.3
ARG REGISTRY_URL=https://registry.npmmirror.com/

# 第一阶段：安装依赖和构建应用
FROM node:${NODE_VERSION}-alpine AS builder

# 设置工作目录
WORKDIR /app

# 复制必要文件到镜像，包括package.json和SASS预编译二进制文件
COPY package*.json ./

# 配置npm源和SASS二进制路径
RUN npm config set registry ${REGISTRY_URL}

# 安装项目依赖
RUN npm install

# 复制源代码进行构建（如果存在构建步骤，例如npm run build）
COPY . .

# 第二阶段：运行应用环境
FROM node:${NODE_VERSION}-alpine

# 设置工作目录
WORKDIR /app

# 从构建阶段拷贝所有内容，包括node_modules
COPY --from=builder /app ./

# 清理缓存文件以减小镜像大小（如果有构建产物，应更精确地复制，避免包含node_modules/.cache）
RUN rm -rf node_modules/.cache

# 设置默认环境变量
ENV NODE_ENV=development

# 设置默认启动命令
CMD ["npm", "run", "dev"]

• compose.yaml文件

docker compose 专属文件

services:
  web_dev:
    build:
      context: .
      dockerfile: Dockerfile-dev
    container_name: web_dev
    working_dir: /app
    environment:
      TZ: Asia/Shanghai
      WEB_PORT: 3000
      NODE_ENV: development
    volumes:
      - ./:/app
      - /app/node_modules
    command: npm run dev
    ports:
      - 8000:3000

• .dockerignore文件

用于忽略不需要构建的文件或文件夹

node_modules
.git
.gitignore
.vscode
*.md
*lock.*
dist
build