Question

我正在试图弄清楚如何在Laravel 5项目中使用Vue。 Basic 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的工作方式，或者是什么，但我不知道出了什么问题。我正在使用webpack.mix.js文件直接从laravel安装，我尝试暂停和重新启动vagrant，并重新加载浏览器，和php artisan缓存：清除。（之前我尝试使用Elixir代替Mix，并且vueify和gulp，同样的问题。）

任何建议都会非常感谢！

Answer 1

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

Answer 2

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

> @ 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）

Answer 3

我有完全相同的问题。禁用缓存，删除缓存和视图并没有帮助。我正在使用Laravel 5.4在共享主机站点上进行开发。

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

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

Answer 4

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

Answer 5

通过一个简单的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

Answer 6

这对我有用：

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

npm run watch-poll

See more here

Laravel Example.vue不更新

6 个答案: