Vue 中的热重载在 Docker 容器内不起作用

Question

我试图对我现有的简单 vue 应用程序进行 dockerize，遵循 vue 网页https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html中的本教程。我成功创建了图像和容器。我的问题是，当我在 App.vue 中编辑“hello world”之类的代码时，它不会自动更新或者他们称之为热重载？或者我应该迁移到最新的 Vue 以便它可以工作？

docker run -it --name=mynicevue -p 8080:8080 mynicevue/app

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
# RUN npm run build

EXPOSE 8080
CMD [ "http-server", "serve" ]

编辑：

还是没有运气。我注释掉了 npm run build。我还设置了 vue.config.js 并添加此代码

  module.exports = {
    devServer: {
        watchOptions: {
            ignored: /node_modules/,
            aggregateTimeout: 300,
            poll: 1000,
        },
    }
};

然后我像这样运行容器 `docker run -it --name=mynicevue -v %cd%:/app -p 8080:8080 mynicevue/app

当应用程序启动到浏览器时，我在终端中收到此错误，并且浏览器为白屏

“GET /”错误（404）：“未找到”

有人可以帮我看看我的 Dockerfile 有什么问题或丢失吗，以便我可以使用 docker 播放我的 vue 应用程序？

先感谢您。

Answer 1

好的，我在本地尝试了您的项目，这就是您的操作方法。

Dockerfile

FROM node:lts-alpine

# bind your app to the gateway IP
ENV HOST=0.0.0.0

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

EXPOSE 8080

ENTRYPOINT [ "npm", "run", "dev" ]

构建后使用此命令运行 docker 映像：

docker run -v ${PWD}/src:/app/src -p 8080:8080 -d mynicevue/app

解释

1. 看来 Vue 期望您的应用程序在从容器内提供服务时绑定到您的网关 IP。因此ENV HOST=0.0.0.0在 Dockerfile 中。

2. 您需要将src目录挂载到正在运行的容器的/app/src目录，以便本地文件系统中的更改直接反映在容器本身中并可见。

3. Vue 中监视文件更改的方式是使用npm run dev，因此ENTRYPOINT [ "npm", "run", "dev" ]在 Dockerfile 中