Laravel-Mix 與 BrowserSync 可處理除 Vue.js 組件之外的所有內容

Question

• laravel-mix@4.1.4
• 節點 v12.16.2
• NPM v6.14.4
• 操作系統：Laravel 家園

描述：

運行 npm 運行手表就像一個魅力，每當我對視圖、控制器、模型等進行更新時。它會自動刷新並節省時間。 然而，有了 .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...

澄清一下，除了 .vue 文件沒有編譯到 app.js 之外，browserSync 可以處理所有內容。 在對 a.vue 文件進行更新后，我需要以某種方式強制它重新編譯。

Answer 1

我設法通過使用來自package.json的另一個命令使其工作：

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

所以你然后運行npm run hot並且 browsersync 開始重新加載甚至組件