Laravel Vue.js wird keine Datei auf Server aktualisieren

Question

Ich entwickle gerade eine Website mit Laravel 5.4 und Vue.js. Ich habe meine Example.vue-Datei vor ein paar Stunden bearbeitet und sie mit Filezilla auf meinen Server hochgeladen, und alles hat gut funktioniert. Aber nicht, dass ich die Datei bearbeitet und versucht habe, sie erneut auf den Server zu laden, der Webserver zeigt die .vue-Datei als die alte und nicht die neue an.

Ich habe versucht, sowohl Computer-Cache und Server/Laravel-Cache zu löschen, aber nichts passiert .. Ich laufe sowohl npm run dev und npm run watch und ich bekomme keine Fehler.

Als ich Element auf meiner Website überprüfen erhalte ich eine Fehlermeldung, dass: TypeError: Cannot read property 'get' of undefined, aber dies in der app.js in Ressourcen/assets/js befindet, wird behoben, indem Sie die Zeile hinzufügen Vue.use (require ('vue-Ressource ')); aber ich bekomme immer noch den gleichen Fehler und die gleiche Ansicht wie vor der Aktualisierung.

Das erste Mal, als ich die Datei aktualisierte, wollte ich nur einen Hello World Text anzeigen, und nach dem Update, wenn ich die Ladefunktion für vue und div Elemente umgesetzt hatte, es zeigt immer noch mit der Hallo Welt Nachricht up ...

das ist meine Example.vue Datei:

<template> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <p class="text-center" v-if="loading"> 
 
       Loading... 
 
      </p> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<script> 
 
    export default { 
 
     mounted() { 
 
      this.$http.get('/status/' + this.user_id) 
 
      .then((resp) => { 
 
       console.log(resp) 
 
       this.status = resp.body.status 
 
       this.loading = false 
 
      }) 
 
     }, 
 
     props: ['user_id'], 
 
     data() { 
 
      return { 
 
       status: '', 
 
       loading: true 
 
      } 
 
     } 
 
    } 
 
</script>

Wer weiß, dass ich tun kann, versuchen? Es ist wirklich frustrierend, wenn nur die .vue-Datei nicht aktualisiert wird. Alle anderen Dateien funktionieren einwandfrei!

Answer 1

Sie sollten Laravel Mix in Ihrer Datei webpack.mix.js verwenden. Sie installieren Mix, indem Sie Mix zu Ihrer package.json Datei hinzufügen. Dann, indem Sie npm install auf Mac und auf Windows ausführen, indem Sie npm install --no-bin-links ausführen. Dann wird dev laravel mix mit dem Ausführen von npm run kompilieren und alle Ressourcen-Assets in Ihrem öffentlichen Ordner aktualisieren. siehe hier https://laravel.com/docs/5.4/mix. Dadurch werden alle Ihre vue-Komponenten im Ordner resources/assets/js/components aktualisiert, der alle Ihre vue-Komponenten enthalten sollte. Das sollte es sein. Wenn sich die Dinge nicht aktualisieren, müssen Sie möglicherweise npm run watch oder npm run watch-poll ausführen, um Updates zu erfassen, da sie nach Änderungen suchen.

-Mine sieht so aus:

webpack.mix.js:

const { mix } = require('laravel-mix'); 

/* 
|-------------------------------------------------------------------------- 
| Mix Asset Management 
|-------------------------------------------------------------------------- 
| 
| Mix provides a clean, fluent API for defining some Webpack build steps 
| for your Laravel application. By default, we are compiling the Sass 
| file for the application as well as bundling up all the JS files. 
| 
*/ 

mix.js('resources/assets/js/app.js', 'public/assets/js'); 

mix.scripts([ 
    'resources/assets/js/enum_gender_select.js', 
    'resources/assets/js/enum_title_select.js' 
], 'public/assets/js/enum_select.js'); 


mix.sass('resources/assets/sass/app.scss', '../resources/assets/css/sass.css'); 

mix.styles([ 
    'resources/assets/css/app.css', 
    'resources/assets/css/sass.css' 
], 'public/assets/css/all.css'); 

Homestead package.json Datei:

{ 
    "private": true, 
    "scripts": { 
    "dev": "npm run development", 
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "watch-poll": "npm run watch -- --watch-poll", 
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", 
    "prod": "npm run production", 
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" 
    }, 
    "devDependencies": { 
    "axios": "^0.15.3", 
    "bootstrap-sass": "^3.3.7", 
    "cross-env": "^3.2.3", 
    "jquery": "^3.1.1", 
    "laravel-mix": "0.*", 
    "lodash": "^4.17.4", 
    "vue": "^2.1.10" 
    } 
}