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、同じ問題。)
どんな提案でも大歓迎です!
私はまったく同じ問題を抱えていました。ローカル開発環境(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)
私はまったく同じ問題を抱えています。キャッシュを無効にしたり、キャッシュとビューを削除したりしても効果はありません。 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で。
単純なVue.jsプロジェクトでは、npm run serve
を介してプロジェクトを提供します。このプロジェクトは同時にnpmウォッチャーも実行します。ウォッチャーは、Vue.jsプロジェクトの変更を監視します。 php artisian serve
経由でサービスを提供しているため、npm run watch
はLaravelの変更のみを監視するため、php artisan serve
も実行する必要があります。
このソリューションは、開発プロジェクトを変更している間、php artisan serve
とnpm run watch
を一緒に実行しています。
インストール:npm install npm-watch
同じ問題が発生しました。XAMPPを使用していて、代わりに「phpartisanserve」を試してみました。