web-dev-qa-db-ja.com

Laravel Example.vueが更新されない

Vue a Laravel 5プロジェクトで使用する方法を理解しようとしています。基本Laravelアプリに同梱されています.jsとExample.vue。home.blade.phpに追加することで、「私はサンプルコンポーネントです!」をビューに表示することができました。不思議なことに、このコンポーネントはまったく変更できません。 、他の問題の中でも。

Example.vueのテキスト(ロジックではなくテンプレート部分のみ)を変更しても、まったく更新されません。 (Laravel docsなどのようにnpmrun devを実行しようとしましたが、エラーなしでコンパイルされているようで、その時点で/public/js/app.jsが変更されていますが、ブラウザでの表示は変わりません。)

App.blade.phpを変更すると、home.blade.phpの変更と同様に、これらの変更が表示されます。ただし、/ resources/assets/js /app.jsまたはExample.vueのコンテンツを変更しても効果があるという証拠は見つかりません。さらに紛らわしいことに、app.blade.phpdiv要素からid = "app"を削除しても、Exampleコンポーネントが消えることはありません。 vue jsfiddleで遊んだことに基づいて、これはコンポーネントを壊すはずのようです。

それが何らかのキャッシュの問題なのか、コンパイルの問題なのか、またはvueの動作方法などがわからないのですが、何が問題になっているのかわかりません。 laravelインストールから直接webpack.mix.jsファイルを使用していて、vagrantを停止して再起動し、ブラウザーをリロードして、php artisan cache:clearを試しました(以前に試しました) Mixの代わりにElixirを使用し、vueifyとgulp、同じ問題。)

どんな提案でも大歓迎です!

9
eveames

ブラウザ(F12)からコンソールを開こうとしましたか?次にネットワークに移動し、キャッシュの無効化をオンまたはオフにしてから、ページをリロードしました。古いストレージファイルを使用しているブラウザ。 enter image description here

21
Winston Fale

私はまったく同じ問題を抱えていました。ローカル開発環境(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)

3
michael

私はまったく同じ問題を抱えています。キャッシュを無効にしたり、キャッシュとビューを削除したりしても効果はありません。 Laravel 5.4を使用して共有ホスティングサイトで開発しています。

このビデオへのコメント https://www.youtube.com/watch?v=pTVCW5k4pi npminstallとnpmrunwatchを提案します。このページの指示に従ってください https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/ npm installを機能させることができましたが、npm runwatchでエラーが発生しました。

本当にVueコンポーネントが私がやりたいことのための最良の解決策になるだろうように見えます、しかし私がそれらを私のために働かせることができないなら、私はただ行かなければならないでしょうAJAXで。

1
everstrivin

単純なVue.jsプロジェクトでは、npm run serveを介してプロジェクトを提供します。このプロジェクトは同時にnpmウォッチャーも実行します。ウォッチャーは、Vue.jsプロジェクトの変更を監視します。 php artisian serve経由でサービスを提供しているため、npm run watchはLaravelの変更のみを監視するため、php artisan serveも実行する必要があります。

このソリューションは、開発プロジェクトを変更している間、php artisan servenpm run watchを一緒に実行しています。

インストール:npm install npm-watch

0
ThomasAFink

同じ問題が発生しました。XAMPPを使用していて、代わりに「phpartisanserve」を試してみました。

0
Alphan Karacaer