编写Dockerfile.dev

FROM node:23-alpine

WORKDIR /app

COPY ./package.json ./

RUN npm config set registry https://registry.npmmirror.com/
RUN npm install -g pnpm && pnpm install

COPY . .

EXPOSE 5173
EXPOSE 3011

CMD ["pnpm", "run", "dev", "--host"]

编写docker-compose.yml文件

利用docker compose可以更加方便的启动docker容器，而不需要写一串很长的docker run -v $(pwd):/app 命令

version: '3'
services:
  demo:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
      - "3011:3011"
    volumes:
      - /app/node_modules
      - .:/app

注意：需要配置vitejs暴露hmr端口

如果没有这一步，及时挂载了volumes, docker container内的vitejs也无法热更新

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    host:"0.0.0.0",
    hmr: {
      port: 3011
    },
    watch: {
      usePolling: true,
    },
  }
})