与新的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 CLI从终端启动新的Vue.js Webpack模板项目时(我是在安装了Vue CLI的docker webpack容器内完成此操作)，使用了已记录的启动命令(可在此处的仓库中找到: https://github.com/vuejs-templates/webpack )我的webpack-dev-server可以无法检测到对我文件的更改.

  $ npm install -g vue-cli$ vue init webpack我的项目$ cd我的项目$ npm安装$ npm运行开发 

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

我看到某个地方，如果Webpack试图监视的目录中附加了其他字符，有时webpack会遇到麻烦，但是当我这样做时，情况似乎并非如此:

  $ ls 

以前，我已经使用了这个确切的容器和这个确切的项目来进行整个设置，所以我知道它与在docker容器中运行无关.

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

解决方案

似乎某些Docker容器不支持本机文件监视程序，这导致检测文件更改时出现问题.您可以通过使用webpack开发服务器中的主动轮询机制来解决此问题.只有在devServer对更改没有反应时，才应激活此选项:

vue.config.js

  module.exports = {devServer:{watchOptions:{poll:true，//或每隔x毫秒使用一个整数进行检查，例如民意调查:1000，被忽略:/node_modules///否则刷新会花费很多时间}}}; 

来源:文档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传统手表

When starting a new Vue.js Webpack template project from the terminal with the Vue CLI (I did this inside a docker webpack container that I built with Vue CLI installed) using the documented startup commands (found in the repo here: https://github.com/vuejs-templates/webpack) my webpack-dev-server does not detect changes to my files.

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

Once the webpack-dev-server comes up listening on 0.0.0.0:8080 I can access the the server and I see the proper vue project sample rendered in the browser. HOWEVER when I change one of the files, the webpack server compilation status (container command line / logs) does not update and no changes are visible in the browser.

I saw someplace that sometimes webpack will have trouble if a directory it is attempting to monitor has additional characters attached to it but that does not appear to be the case when I do:

$ ls

Previously I had this entire setup working with this exact container and this exact project, so I know it doesn't have to do with running inside of a docker container.

I ran into this issue when attempting to write up the documentation to help our team launch a new project when necessary.

解决方案

It seems that some Docker containers do not support native file watchers which leads to problems detecting file changes. You can solve this by using the active polling mechanism from the webpack dev server. You should only activate this if the devServer is not reacting to changes:

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
    }
  }
};

source: documentation webpack watchOptions

---

If you are also using nodemon in the back-end part and having the same issue there, you can solve it by using the --legacy-watch flag (short -L) which starts polling too.

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

or in package.json:

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

documentation: nodemon legacy watch

这篇关于与新的Vue.js CLI Webpack模板项目一起使用时，为什么Webpack-Dev-Server(在docker容器内部)无法检测文件更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！