带有 BrowserSync 的 Laravel-Mix 可以处理除 Vue.js 组件之外的所有内容

Question

• laravel-mix@4.1.4
• 节点 v12.16.2
• NPM v6.14.4
• 操作系统：Laravel Homestead

描述：

每当我更新视图、控制器、模型等时，运行 npm run watch 就像一种魅力。它会自动刷新并节省时间。但是，对于 .vue 文件，则是另一回事。我正在更新我的组件，浏览器检测到更改并重新加载。但不是使用更新后的代码，就像它的缓存或更改后不编译 app.js 一样。

当我从“npm run watch”中“ctrl+c”退出并再次运行时。它显示了更新的代码。问题是每次我做更新。我必须运行“npm run watch”或“npm run dev”。

我今天花了几个小时，浏览教程并对 webpack.mix.js 文件进行更改。我现在撞到了一堵砖墙......

我的 webpack.mix.js 文件

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])
    .sourceMaps()
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
    host: '192.168.10.10',
    proxy: 'mywebsite.test',
    open: false,
    injectChanges: true,
    logSnippet: true,
    watchOptions: {
        usePolling: true,
        interval: 500,
        poll: true,
        ignored: /node_modules/
    },
    files: [
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/js/app.js',
        'resources/js/components/*.vue',
        'packages/mixdinternet/frontend/src/**/*.php',
        'public/js/**/*.js',
        'public/css/**/*.css'
    ]
});

浏览器同步

DONE  Compiled successfully in 7276ms                                                                        4:05:50 PM

          Asset      Size        Chunks             Chunk Names
   /css/app.css   177 KiB       /js/app  [emitted]  /js/app
     /js/app.js  2.92 MiB       /js/app  [emitted]  /js/app
/js/manifest.js  6.12 KiB  /js/manifest  [emitted]  /js/manifest
  /js/vendor.js   885 KiB    /js/vendor  [emitted]  /js/vendor
[Browsersync] Proxying: http://mywebsite.test
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.10.10:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...

澄清一下，browserSync 可以处理除未编译到 app.js 中的 .vue 文件之外的所有内容。在更新 .vue 文件后，我需要以某种方式强制它重新编译。

Answer 1

我设法通过使用来自以下位置的另一个命令使其工作package.json：

"scripts": {
    "hot": "mix watch --hot",
}

然后你运行npm run hotbrowsersync 甚至开始重新加载组件