Set locale: Vue ist nicht definiert

Question

In meiner main.js Datei I Vue registrieren:

import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
import VueResource from 'vue-resource'; 
import VueI18n from 'vue-i18n'; 

import App from './components/App.vue'; 

// Register plugins 
Vue.use(VueResource); 
Vue.use(VueRouter); 
Vue.use(VueI18n); 

// Create router 
const router = new VueRouter({ 
    history: true, 
    saveScrollPosition: true, 
}); 

router.start({ 
    components: { App }, 
}, 'body'); 

Jetzt möchte ich eine Übersetzungsdatei in meinem App.Vue bekommen:

<script> 
export default { 
    ready() { 
    /* Set Language */ 
    Vue.locale('nl', function setLanguage() { 
     return this.$http({ 
     url: '/src/language/nl_NL.js', 
     method: 'get', 
     headers: { 
      Accept: 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     }) 
     .then((response) => { 
     Vue.locale('nl', response); 
     Vue.config.lang = 'nl'; 
     }).then(() => { 
     alert('Error'); 
     }); 
    }); 
    }, 

}; 
</script> 

Ich habe der Fehler: 'Vue' is not defined. Was mache ich falsch?

Answer 1

Meine Vermutung wäre, dass Sie eine Importanweisung für vue sind vermisst in Ihnen App.vue, als vue nicht automatisch selbst in die vue Dateien zu injizieren ist AFAIK:

<script> 
import Vue from 'vue'; // <-- 

export default { 
    ready() { 
    /* Set Language */ 
    Vue.locale('nl', function setLanguage() { 
     return this.$http({ 
     url: '/src/language/nl_NL.js', 
     method: 'get', 
     headers: { 
      Accept: 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     }) 
     .then((response) => { 
     Vue.locale('nl', response); 
     Vue.config.lang = 'nl'; 
     }).then(() => { 
     alert('Error'); 
     }); 
    }); 
    }, 

}; 
</script> 

Answer 2

Für was ich aus Ihrem Code verstehen kann, wird Ihre Vue App erstellt, bevor Sie Vue alle Abhängigkeiten verwenden. Sie sollten die App-Instanz erst erstellen, nachdem Sie all diese Vue.use (*) ausgeführt haben. Es sollte es tun. Außerdem wäre es besser, this in der Komponente zu verwenden, um auf die rechte Instanz von Vue zu verweisen. Innerhalb Ihrer Methoden können Sie self = this tun, so dass Sie sich gegen Geltungsprobleme schützen. Innerhalb von untergeordneten Komponenten können Sie dies verwenden. $ Root, um auf die App-Komponente zu verweisen. Ich hoffe das hilft.