当与新的 Vue.js CLI Webpack 模板项目一起使用时，为啥 Webpack-Dev-Server（在 docker 容器内）不检测文件更改？

Posted 2023-02-22

【中文标题】当与新的 Vue.js CLI Webpack 模板项目一起使用时，为啥 Webpack-Dev-Server（在 docker 容器内）不检测文件更改？

【英文标题】：Why doesn't Webpack-Dev-Server (inside docker container) detect file changes when used with a new Vue.js CLI Webpack Template Project?当与新的 Vue.js CLI Webpack 模板项目一起使用时，为什么 Webpack-Dev-Server（在 docker 容器内）不检测文件更改？

【发布时间】：2017-05-20 09:33:48

【问题描述】：

使用记录在案的启动命令（在此处的 repo 中找到：@ 987654321@) 我的 webpack-dev-server 没有检测到对我的文件的更改。

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

一旦 webpack-dev-server 出现在 0.0.0.0:8080 上监听，我就可以访问该服务器，并在浏览器中看到正确的 vue 项目示例。但是，当我更改其中一个文件时，webpack 服务器编译状态（容器命令行/日志）不会更新，并且在浏览器中看不到任何更改。

我在某个地方看到有时 webpack 会遇到问题，如果它试图监控的目录附加了额外的字符，但当我这样做时似乎不是这样：

$ ls

以前我的整个设置都使用这个确切的容器和这个确切的项目，所以我知道它与在 docker 容器内运行无关。

我在尝试编写文档以帮助我们的团队在必要时启动新项目时遇到了这个问题。

【参考方案1】：

如果原始文件存储在 Linux 文件系统中，Linux 容器只会接收文件更改事件（“inotify 事件”）。

引自https://docs.docker.com/desktop/windows/wsl/

所以你应该将你的代码文件移动到 wsl2 文件系统中（前缀为\\wsl$）。

【参考方案2】：

似乎某些 Docker 容器不支持本机文件观察程序，这会导致检测文件更改时出现问题。您可以通过使用来自 webpack 开发服务器的主动轮询机制来解决这个问题。仅当 devServer 未对更改做出反应时才应激活此功能：

vue.config.js

module.exports = 
  devServer: 
    watchOptions: 
      poll: true, // or use an integer for a check every x milliseconds, e.g. poll: 1000,
      ignored: /node_modules/ // otherwise it takes a lot of time to refresh
    
  
;

来源：documentation webpack watchOptions

---

如果您还在后端部分使用nodemon 并在那里遇到同样的问题，您可以使用开始轮询的--legacy-watch 标志（简称-L）来解决它。

npm exec nodemon -- --legacy-watch --watch src src/main.js

或package.json:

"scripts": 
  "serve": "nodemon --legacy-watch --watch src src/main.js"

文档：nodemon legacy watch

【参考方案3】：

在我的 Windows 机器上使用 vue-cli 初始化应用程序时，我也遇到了这个问题。您可以通过将 webpack 从 1.13.2（随 vue-cli 提供）更新到 1.14.0 来解决此问题。

编辑：似乎它并没有完全起作用。似乎适用于所有文件的另一个解决方案是添加 new webpack.OldWatchingPlugin() 作为 webpack.dev.conf.js 中的附加插件。