如何使热重载与dockerized vue3和vite一起工作

Question

我在使用 vite 的 vue3 中使用 dockerized 应用程序时遇到问题。

首先我使用docker制作了完美运行的生产环境

这是我的dockerfile

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ../ /app
RUN npm run build

# Production
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

在此之后，我制作了仅包含此内容的 docker-compose 文件

services:
  web:
    build:
      context: .
      dockerfile: docker/Dockerfile
    ports:
      - "8080:80"

当我运行

docker-compose up -d

时，它在

localhost:8080

上完美运行，但我有一个问题，热重载不再适用于本地开发目的，因此我必须再次构建我的应用程序才能查看实时结果。

我怎样才能实现这个目标？

这是我的 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  transpileDependencies: true,
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

感谢您提前的帮助

Answer 1

我在开发 Django+React 应用时也遇到了无法使用 Docker 来使用 vite 热重载功能的问题。 我按照以下博客文章使用

docker compose watch

功能（自 v2.22 起）解决了这个问题：Docker Compose 观看博客文章：

version: '3.5'

services:
  frontend:
    container_name: frontend_web
    tty: true
    build:
      context: ../../
      dockerfile: ./docker/frontend/Dockerfile
    ports:
      - "8080:8080"
    develop:
      watch:
        - action: sync+restart
          path: ../../frontend
          target: /web/frontend
          ignore:
            - node_modules
    networks:
      - web-docker-network

networks:
  web-docker-network:
    external: true

所以重要的部分是：

develop:
   watch:
     - action: sync+restart
       path: ../../frontend
       target: /web/frontend
       ignore:
         - node_modules

然后，您可以使用

docker compose watch

启动容器，并且文件会同步，如果检测到更改，则 compose 会重新启动容器（包括更改）。我希望它有帮助！