如何使用vite动态导入json文件 CodeSandbox

问题描述

我在 vue-i18n 项目中使用了 Nuxtjs，并且我想动态地使用 vite 导入我的语言环境文件。

当我使用 webpack 时，那些代码运行良好

plugins/i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import config from '@/config';

Vue.use(VueI18n);

let messages = Object;

config.locale.available.forEach(locale => {
    messages[locale] = require(`~/locales/${locale}.json`);
});

export default ({ app,store }) => {
    app.i18n = new VueI18n({
        locale: store.state.locale.locale,messages: messages
    });
}

我知道vitejs中没有require()，还有vitejs的glob-import特性

所以我首先尝试如下：

let messages = Object,languages = import.Meta.glob('../locales/*.json'); // => languages = {} (languages only get {} value)

config.locale.available.forEach(locale => {
    messages[locale] = languages[`../locales/${locale}.json`];
});

但是 languages 只有 {} 值。

然后我尝试使用 import()

let messages = Object,translate = lang => () => import(`@/locales/${lang}.json`).then(i => i.default || i);

config.locale.available.forEach(locale => {
    messages[locale] = translate(locale);
});

终端和控制台都没有错误，但没有正确加载语言环境文件。

只有当我一一import()时，问题才会消失：

import en from '@/locales/en.json';
import fr from '@/locales/fr.json';
import ja from '@/locales/ja.json';

let messages = Object;

messages['en'] = en;
messages['fr'] = fr;
messages['ja'] = ja;

CodeSandbox

但是，如何动态导入呢？

我用谷歌搜索了一下，但帮助不大。非常感谢任何人的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

nuxt.js vitejs vue-i18n