vue.js - vue-i18n 延迟加载正在加载所有语言环境

Question

我正在尝试为 vue-i18n 实现延迟加载，我正在按照 https://kazupon.github.io/vue-i18n/guide/lazy-loading.html 的说明进行操作.

但是导入的行为并不像我期望的那样。我希望它仅在调用时加载文件，但当页面刷新时，即使未执行导入，它也会下载与模式“@i18n/messages/*.js”匹配的所有文件。该行存在于代码中这一事实足以加载所有包。

import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`)

我错过了什么？

我正在使用 vue-cli。

Answer 1

我无法使用文档中的语法指示 webpack 单独打包每个文件，但发现以下解决方法虽然不理想但对我有用。

我正在替换文档中的 loadLanguageAsync(lang) 方法:

export function loadLanguageAsync(lang) {
    // If the same language
    if (i18n.locale === lang) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language was already loaded
    if (loadedLanguages.includes(lang)) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language hasn't been loaded yet
    return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`).then(
        messages => {
        i18n.setLocaleMessage(lang, messages.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
    }
)

有了这个:

export async function loadLanguageAsync(lang) {
    // If the same language
    if (i18n.locale === lang) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language was already loaded
    if (loadedLanguages.includes(lang)) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language hasn't been loaded yet
    let messages = null;
    switch (lang) {
        case 'en':
            messages = await import(/* webpackChunkName: "i18n-en" */ `@/i18n/messages/en.js`)
            break;
        case 'fr':
            messages = await import(/* webpackChunkName: "i18n-fr" */ `@/i18n/messages/fr.js`)
            break;
        case 'de':
            messages = await import(/* webpackChunkName: "i18n-de" */ `@/i18n/messages/de.js`)
            break;
    }
    if (messages != null) {
        i18n.setLocaleMessage(lang, messages.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
    }
}