windows wsl2+vite+docker-compose 开发 热更新问题

VUE·前端·容器 · 2023-11-10

使用vite搞前端,使用docker来配置运行环境
配置好后无法热更新
最终可以通过。

  1. 需要暴露hrm服务端口(可自定义)
  2. 配置 hrm: usePolling: true

文件:Dockerfile

FROM node:18.9.1-alpine
WORKDIR /usr/app/
COPY package.json .
RUN npm install --quiet
COPY . .
CMD npm run dev
EXPOSE 5173
EXPOSE 3011

文件:docker-compose.yml

version: '2'
services:
  web:
    build: .
    command: npm run dev
    working_dir: /usr/app/
    volumes:
      - /usr/app/node_modules
      - .:/usr/app
    ports:
      - "5173:5173"
      - "3011:3011"

文件:vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:"0.0.0.0",
    hmr: {
      port: 3011,
    },
    watch: {
      usePolling: true,
    },
    strictPort: true,
  }
})

运行 docker-compose up -d 构建并运行镜像

VITE官网
Vite and Docker #4116

docker wsl2
Theme Jasmine by Kent Liao