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

Question

laravel-mix@4.1.4

Node v12.16.2

NPM v6.14.4

操作系统:Laravel 家园

描述:

每当我对 View 、 Controller 、模型等进行更新时，运行 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...

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

Answer 1

我设法通过使用 package.json 中的另一个命令使其工作:

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

所以你然后运行 ​​npm run hot并且 browsersync 甚至开始重新加载组件