Laravel Example.vue 不更新答案

【问题标题】：Laravel Example.vue not updatingLaravel Example.vue 不更新
【发布时间】：2017-07-03 15:00:48
【问题描述】：

我正在尝试弄清楚如何在 Laravel 5 项目中使用 Vue。基本的 Laravel 安装附带 app.js 和 Example.vue。我能够拥有 “我是一个示例组件！”通过添加到 home.blade.php 显示在我的视图中。让我感到困惑的是，除其他问题外，我根本无法更改此组件。

如果我更改 Example.vue 中的文本（只是在模板部分，而不是逻辑中），它根本不会更新。（我已经尝试按照 Laravel 文档等运行 npm run dev ，它似乎编译没有错误，并且 /public/js/app.js 当时已修改，但浏览器中的视图没有改变。 )

当我修改 app.blade.php 时，这些更改会显示出来，home.blade.php 中的更改也会显示。但是，我找不到证据表明更改 /resources/assets/js/app.js 或 Example.vue 的内容有任何影响。更令人困惑的是，如果我从 app.blade.php div 元素中删除 id="app" ，这不会导致 Example 组件消失。基于玩 vue jsfiddle，这似乎应该破坏组件。

我不确定这是某种缓存问题，还是编译问题，或者我不了解 vue 的工作方式，或者是什么，但我不知道出了什么问题。我直接从 laravel 安装中使用 webpack.mix.js 文件，我尝试停止并重新启动 vagrant，重新加载浏览器和 php artisan cache:clear。（之前我尝试使用 Elixir 代替 Mix，以及 vueify 和 gulp，同样的问题。）

任何建议将不胜感激！

【问题讨论】：

标签： laravel-5 vuejs2

【解决方案1】：

我在使用 laravel 和 vuejs 时也遇到了类似的问题：

Step1.检查npm run watch和npm run watch-poll是否正常工作。

Step2. 如果您的 app.js 文件很大，您的浏览器可能正在缓存它。使用 CTRL+F5 和 CTRL+SHIFT+F5（在 Chrome 上）清除浏览器缓存。

Step3. 此方法适用于缓存清除。在webpack.config.js 中添加.version()。

例如。 mix.js('resources/js/app.js','public/js').vue().sass('resources/sass/app.scss', 'public/css').version();

您的脚本将如下所示： <script src="{{ mix('js/app.js') }}" defer type="text/javascript"></script>.

这将消除所有缓存问题:)

【讨论】：

【解决方案2】：

这对我有用：

您可能会发现在某些环境中，当您的文件更改时，Webpack 并没有更新。如果您的系统出现这种情况，请考虑使用 watch-poll 命令：

npm run watch-poll

See more here

【讨论】：

【解决方案3】：

通过一个简单的 Vue.js 项目，我们通过npm run serve 为项目提供服务，该项目同时运行 npm 观察程序。 watcher 监视 Vue.js 项目中的变化。由于我们通过php artisian serve 提供服务，我们还需要运行npm run watch，因为php artisan serve 只监视Laravel 的变化。

解决方案在您更改开发项目时同时运行 php artisan serve 和 npm run watch。

安装：npm install npm-watch

【讨论】：

【解决方案4】：

我遇到了同样的问题，我使用 XAMMP 并尝试了“php artisan serve”，这对我有用。

【讨论】：

【解决方案5】：

我遇到了同样的问题。我正在使用本地开发环境（带有 php7 和 mysql 的 Mac OS X Sierra）。如上所述，我尝试了缓存清理。停止并重新启动 php 服务器（以防万一..）：不走运。然后'composer dump-autoload'：问题仍然存在。然后'npm run watch'，它给出了以下消息：

> @ watch /Users/ulam/code/myproj
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active Webpack is watching the files…

 95% emitting

 DONE  Compiled successfully in 4171ms

然后：

nks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                               /js/app.js   1.2 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css   147 kB       0  [emitted]         /js/app


 WAIT  Compiling...                                                                                            19:48:26

 95% emitting

 DONE  Compiled successfully in 86ms                                                                           19:48:26

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  1.2 MB       0  [emitted]  [big]  /js/app
/css/app.css  147 kB       0  [emitted]         /js/app


 WAIT  Compiling...                                                                                            19:49:37

 95% emitting

 DONE  Compiled successfully in 121ms                                                                          19:49:38

       Asset    Size  Chunks                    Chunk Names
  /js/app.js  1.2 MB       0  [emitted]  [big]  /js/app
/css/app.css  147 kB       0  [emitted]         /js/app

然后一切正常。 (Laravel 5.5.3)

【讨论】：

【解决方案6】：

我也有同样的问题。禁用缓存、删除缓存和视图无济于事。我正在使用 Laravel 5.4 在共享托管网站上进行开发。

此视频的 cmets https://www.youtube.com/watch?v=pTVCW5k4piU 建议 npm install 和 npm run 监视。按照此页面上的说明https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/ 我能够让 npm install 工作，但 npm run watch 给了我错误。

看起来 Vue 组件将成为我想做的最好的解决方案，但如果我不能让它们为我工作，我将不得不使用 AJAX。

【讨论】：

此页面 (laracasts.com/discuss/channels/elixir/…) 显示 package.json 文件中的 cross-env 路径缺少 dist，因此对于我的 package.json 文件中的所有 cross-env 实例，我将 cross -env/dist/ 即 "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config =node_modules/laravel-mix/setup/webpack.config.js”，完成后，npm run watch 对我有用。

【解决方案7】：

您是否尝试从浏览器（F12）打开您的控制台，然后转到网络并检查并取消选中禁用缓存，然后重新加载您的页面。您的浏览器正在使用您的旧存储文件。

【讨论】：

也为我工作。但这只是我解决的问题吗？我的意思是..如果其他人没有禁用缓存，他们仍然能够正确地看到页面吗？