Laravel Example.vue 不更新

Posted 2023-02-22

【中文标题】Laravel Example.vue 不更新

【英文标题】：Laravel Example.vue not updating

【发布时间】：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，同样的问题。）

任何建议将不胜感激！

【参考方案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）打开您的控制台，然后转到网络并检查并取消选中禁用缓存，然后重新加载您的页面。您的浏览器正在使用您的旧存储文件。

【讨论】：

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