Visualizzazione dei risultati da 1 a 3 su 3

Visualizzazione discussione

  1. #1
    Moderatore di PHP L'avatar di Alhazred
    Registrato dal
    Oct 2003
    Messaggi
    12,505

    [Vue] localizzazione e problemi con "return import" che genera "unexpected token"

    Sto integrando Vue in un progetto che usa Laravel per il backend.
    Trovo problemi volendo gestire più lingue caricandole in modo dinamico, perché caricandole tutte funziona.
    Per la localizzazione uso vue-i18n e il problema ce l'ho provando ad impostare quello che è definito come Lazy loading.

    Un po' di codice:
    codice:
    // app.js
    
    require('./bootstrap');
    
    window.Vue = require('vue');
    import i18n from './i18n-setup'
    
    Vue.component('example-component', require('./components/ExampleComponent.vue'));
    
    let app = new Vue({
        el: '#app',
        i18n
    });
    codice:
    // i18n-setup.js
    
    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    import messages from './lang'
    import axios from 'axios'
    
    Vue.use(VueI18n)
    
    const i18n = new VueI18n({
        locale: 'it', // set locale
        fallbackLocale: 'it',
        messages // set locale messages
    })
    
    export default i18n
    
    const loadedLanguages = ['it'] // our default language that is preloaded
    
    function setI18nLanguage (lang) {
        i18n.locale = lang
        axios.defaults.headers.common['Accept-Language'] = lang
        document.querySelector('html').setAttribute('lang', lang)
        return lang
    }
    
    export function loadLanguageAsync (lang) {
        if (i18n.locale !== lang) {
            if (!loadedLanguages.includes(lang)) {
                return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msgs => {
                    i18n.setLocaleMessage(lang, msgs.default)
                    loadedLanguages.push(lang)
                    return setI18nLanguage(lang)
                })
            }
            return Promise.resolve(setI18nLanguage(lang))
        }
        return Promise.resolve(lang)
    }
    questi 2 file sono nella stessa cartella, la cartella lang si trova allo stesso livello di questi file e dentro ci sono 2 file javascript it.js ed en.js con all'interno le stringhe per le traduzioni.

    Il problema sorge sulla riga
    return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msgs => {

    precisamente sull'import mi viene detto
    Module build failed: SyntaxError: D:/QSync/htdocs/test/resources/assets/js/i18n-setup.js: Unexpected token (28:19)

    Ho letto che questo problema deriva da Babel, ma leggendo in giro non trovo la soluzione.

    Cosa posso provare a fare?

    Vue 2.5.7
    npm 5.6.0
    i18n 8.3.1
    Ultima modifica di Alhazred; 14-11-2018 a 02:05

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.