运行 npm run serve 时如何自动保存已编译的 vue 文件答案

【问题标题】：How to auto save compiled vue files when running npm run serve运行 npm run serve 时如何自动保存已编译的 vue 文件
【发布时间】：2020-04-13 05:44:33
【问题描述】：

在使用 vue CLI 设置项目时，使用 vue.js 我可以运行 $ npm run serve 编译文件并在localhost:8080启动一个端口

我的问题是我该怎么做才能将在页面中呈现的生成也保存到我的开发机器中的目录中。

就像自动保存和修改一样，这样我就可以在另一个项目上使用该文件，这在开发过程中都依赖于生成的文件

【问题讨论】：

标签： vue.js webpack vue-cli npm-scripts

【解决方案1】：

您确定它尚未在某处创建捆绑包吗？在某种build 或dist 文件夹中？

在webpack 配置中，您可以检查output 使用的值。

【讨论】：

当然它没有创建任何钩子或文件夹，除非我运行 $ npm run build 这是用于编译构建版本的命令和这个命令白蚁在单个任务之后。

【解决方案2】：

我不知道是否存在更简单的解决方案。但我建议的是：

将writeToDisk 选项设置为真。这将确保您的捆绑包写入磁盘。 Link
然后将after-emit hook 添加到 webpack 管道：

const exec = require('child_process').exec; // use exec to run shell command

module.exports = {
...
  plugins: [
...
    {
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap('CopyOutputPlugin', (compilation) => {
          exec('command to copy output folder to desired folder');
        });
      }
    }
  ]
};

child_process 文档。

【讨论】：