Question

当使用Vue CLI从终端启动一个新的Vue.js Webpack模板项目时（我在安装了Vue CLI的docker webpack容器中执行此操作）使用记录的启动命令（可在此处的repo中找到：{ {3}}）我的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容器内部运行。

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

Answer 1

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

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

Answer 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

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

2 个答案: