我在为我的 nuxtjs 应用程序热重载不工作构建 docker 时遇到问题答案

【问题标题】：Im having a problem building docker for my nuxtjs app hot reload not working我在为我的 nuxtjs 应用程序热重载不工作构建 docker 时遇到问题
【发布时间】：2021-09-14 23:05:59
【问题描述】：

我在为我的 nuxtjs 应用程序构建 docker 时遇到问题

我正在构建一个 docker 来开发我的 nuxt 应用程序，但是热重载在容器中不起作用，共享卷工作正常，唯一的问题是热重载

我的系统是一个在wsl上使用docker的windows

我在下面添加了我的 dockerfile、docker compose 和 package.json 文件

这是我的 Dockerfile

WORKDIR /usr/src/app
COPY . ./
RUN yarn install
EXPOSE 3000
ENV HOST=0.0.0.0
ENV PORT=3000
CMD [ "yarn", "dev" ]

还有我的 docker-compose.yml

version: "3"
services:
  aplication:
    working_dir: /usr/src/app
    build:
      context: .
    volumes:
      - ./src/:/usr/src/app/src/
    image: wetrack-nuxt
    environment:
      - CHOKIDAR_USEPOLLING=true
      - NODE_ENV=development
    ports:
      - 3000:3000

这是我的 package.json

{
  "name": "minton",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^22.0.0",
    "@ckeditor/ckeditor5-vue": "^1.0.2",
    "@fullcalendar/bootstrap": "^5.3.0",
    "@fullcalendar/core": "^5.3.0",
    "@fullcalendar/interaction": "^5.3.0",
    "@fullcalendar/list": "^5.3.0",
    "@fullcalendar/timegrid": "^5.3.0",
    "@fullcalendar/vue": "^5.3.0",
    "@nuxtjs/axios": "^5.13.6",
    "apexcharts": "^3.20.0",
    "bootstrap": "^4.5.0",
    "bootstrap-vue": "^2.15.0",
    "c3": "^0.7.20",
    "chart.js": "^2.9.3",
    "chartist": "^0.11.4",
    "firebase": "^7.19.1",
    "nuxt": "^2.14.0",
    "nuxt-i18n": "^6.15.0",
    "simplebar-vue": "^2.0.0-beta.4",
    "sweetalert2": "^9.17.1",
    "v-click-outside": "^3.1.0",
    "v-mask": "^2.2.3",
    "vue-apexcharts": "^1.6.0",
    "vue-c3": "^1.2.11",
    "vue-chartist": "^2.3.1",
    "vue-chartjs": "^3.5.1",
    "vue-count-to": "^1.0.13",
    "vue-draggable": "^2.0.6",
    "vue-easy-lightbox": "^0.14.0",
    "vue-form-wizard": "^0.8.4",
    "vue-knob-control": "^1.6.0",
    "vue-multiselect": "^2.1.6",
    "vue-number-input-spinner": "^2.2.0",
    "vue-quill-editor": "^3.0.6",
    "vue-slide-bar": "^1.2.0",
    "vue-string-filter": "^2.1.0",
    "vue-switches": "^2.0.1",
    "vue-tour": "^1.5.0",
    "vue2-datepicker": "^3.6.2",
    "vue2-dropzone": "^3.6.0",
    "vue2-google-maps": "^0.10.7",
    "vuelidate": "^0.7.5",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.1"
  }
}

【问题讨论】：

请尽可能添加完整的 Dockerfile 和 package.json 文件（到问题本身）
这是我完整的 dockerfile

标签： docker docker-compose nuxt.js

【解决方案1】：

以我的 docker-compose 为例，我只需要设置正确的音量就可以了

services:
  nuxt-app:
    build: .
    container_name: nuxt-app

    restart: unless-stopped
    ports:
      - '3333:3333'
    environment:
      - NUXT_PORT=3333
    command: 'yarn dev'
    volumes:
      - ./:/app
    networks:
      - nuxt-network
networks:
  nuxt-network:
    driver: bridge

我的 Dockerfile：

FROM node:14.17.5

ENV NODE_ENV=development

WORKDIR /app

EXPOSE 3333

COPY package.json yarn.lock* ./

RUN yarn

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3333

ENV PATH=./node_modules/.bin/:$PATH

COPY . .

CMD ["yarn", "dev"]

【讨论】：

我使用的是 windows 和 wsl，这个卷策略不适合我
@LeandroOliveira Windows 和 wsl 只要您的卷位于 wsl 土地上，就可以使用卷。即使没有它，它也会对性能产生影响。

【解决方案2】：

我解决了我的删除问题

 build: {
    babel: {
      compact: true
    }
  }

形成我的 nuxt.config.js

【讨论】：