Javascript Laravel与BrowserSync混合使用，可处理Vue.js组件以外的所有组件 拉维尔-mix@4.1.4 节点v12.16.2 NPM v6.14.4 OS:Laravel家园酒店

说明：

每当我更新视图、控制器、模型等时，运行npm run watch就像一个魔咒，它会自动刷新并节省时间。然而，对于.vue文件，情况就不同了。我正在对我的组件进行更新，浏览器检测到更改并重新加载。但与更新后的代码不同，这就像缓存或在更改后不编译app.js一样

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

今天我花了好几个小时，学习教程并修改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可以处理除.vue文件之外的所有文件，而不是编译到app.js中。在对.vue文件进行更新后，我需要以某种方式强制它重新编译。

我通过使用

package.json

中的另一个命令使它工作：

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

然后运行

npm run hot

，browsersync甚至开始重新加载组件