2017-02-15 3 views
2

Ich versuche herauszufinden, wie Vue in einem Laravel 5 Projekt zu verwenden ist. Basic Laravel installiert Schiffe mit app.js und Example.vue. Ich konnte die "Ich bin eine Beispielkomponente!" in meiner Sicht durch Hinzufügen zu home.blade.php zeigen. Was mich irritiert, ist, dass ich diese Komponente unter anderem nicht ändern kann.Laravel Example.vue nicht aktualisiert

Wenn ich den Text in der Example.vue (nur in der Vorlage Teil, nicht die Logik) ändern wird es überhaupt nicht aktualisiert. (Ich habe versucht, npm run dev wie Laravel docs, etc, und es scheint, ohne Fehler zu kompilieren, und/public/js/app.js wird zu diesem Zeitpunkt geändert, aber die Ansicht im Browser ändert sich nicht.)

Wenn ich app.blade.php ändern, erscheinen diese Änderungen, wie auch Änderungen in home.blade.php. Ich kann jedoch keinen Beweis finden, dass die Änderung des Inhalts von /resources/assets/js/app.js oder Example.vue irgendwelche Auswirkungen hat. Noch verwirrender, wenn ich die id = "app" aus dem div-Element app.blade.php entferne, führt dies nicht dazu, dass die Beispielkomponente verschwindet. Basierend auf dem Spiel mit dem Vue Jsfiddle scheint es, als würde dies die Komponente zerstören.

Ich bin mir nicht sicher, ob es eine Art Caching-Problem ist, oder Kompilierproblem, oder ich verstehe nicht, wie Vue funktioniert, oder was, aber ich habe keine Ahnung, was schief läuft. Ich benutze die Datei webpack.mix.js direkt aus der Laravel-Installation, und ich habe versucht, vagrant anzuhalten und neu zu starten und den Browser neu zu laden und php artisan cache: clear. (Früher habe ich versucht mit Elixir anstelle von Mix, und vueif und schlucke, das gleiche Problem.)

Alle Vorschläge würden sehr geschätzt werden!

Antwort

4

haben Sie versucht, Ihre Konsole vom Browser (F12) zu öffnen, dann gehen Sie zum Netzwerk und markieren Sie den Cache deaktivieren und laden Sie dann Ihre Seite neu. etwas, das Ihr Browser mit Ihren alten Speicherdateien verwendet. enter image description here

+1

dies hat nicht für mich funktioniert –

1

Ich habe genau das gleiche Problem. Deaktivieren des Cache, Löschen von Caches und Ansichten hilft nicht. Ich entwickle auf einer Shared-Hosting-Site mit Laravel 5.4.

Die Kommentare zu diesem Video https://www.youtube.com/watch?v=pTVCW5k4piU empfehlen npm installieren und npm laufen zu sehen. Nach den Anweisungen auf dieser Seite https://ferugi.com/blog/nodejs-on-godaddy-shared-cpanel/ konnte ich npm installieren, um zu arbeiten, aber npm run watch gab mir Fehler.

Es sieht wirklich so aus, als würden Vue-Komponenten die beste Lösung für das sein, was ich tun möchte, aber wenn ich sie nicht für mich arbeiten lassen kann, muss ich einfach mit AJAX gehen.

+0

Diese Seite (https://laracasts.com/discuss/channels/elixir/laravel-54-dev-npm-run-dev-error?page=4) zeigt, dass der Cross-env-Pfad in der package.json-Datei nicht vorhanden ist, also für alle Instanzen von cross-env in meiner package.json-Datei habe ich cross-env/dist/ie "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV = Entwicklung Knotenmodule/webpack/bin/webpack.js --progress --Hide-Module --config = Knotenmodule/Laravel-Mix/setup/webpack.config.js ", danach macht npm run watch für mich. – everstrivin

1

Ich hatte das gleiche genaue Problem. Ich benutze eine lokale Entwicklungsumgebung (Mac OS X Sierra mit php7 und mysql). Ich habe Cache-Reinigung wie oben beschrieben versucht. Gestoppt und neu gestartet den PHP-Server (nur für den Fall ..): kein Glück. Dann 'Composer Dump-Autoload': Problem blieb bestehen. Then 'NPM laufen Uhr', die die Folowing Nachrichten gab:

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

und dann:

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 

Alles funktionierte dann. (Laravel 5.5.3)

Verwandte Themen