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

EN

//Importing your data 
const data = import.meta.glob('../locales/*.json')

//Ref helps with promises I think. I'm sure there are more elegant ways.
const imp = ref([{}])

// From https://github.com/vitejs/vite/issues/77
// by LiuQixuan commented on Jun 20

for (const path in data) {
    data[path]().then((mod) => { 
        imp.value.push(mod)
    })
}

JSON.parse(JSON.stringify(**Your data**))

    <div v-for="(module,i) in imp" :key="i">
          <div v-for="(data,j) in module" :key="j">

            //at this point you can read it fully with {{ data }}

            <div v-for="(jsonText, k) in JSON.parse(JSON.stringify(data))" :key=k">
              {{ jsonText.text }}
              <div v-for="insideJson in jsonText" :key="insideJson">
                {{ insideJson.yourtext }}
              </div>
            </div>
          </div>
     </div>

new URL(*, import.meta.url)

    for (const path in modules) {
      modules[path]().then(() => {
        //*************
        const imgURL = new URL(path, import.meta.url)
        //*************
        gallery.value.push(imgURL)
      })
    }
    //Then reference that gallery.value in your :src

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

/***
make sure your public config has `VITE_` prefix or it can't be seen in the client side
https://vitejs.dev/guide/env-and-mode.html#env-files
***/
let messages = Object,
    locales = process.env.VITE_AVAILABLE_LOCALES.split(',');

// check is using vite or webpack
if (typeof __webpack_require__ !== 'function') {
    // for vite

    /***
    glob and globEager are both work for this
    https://vitejs.dev/guide/features.html#glob-import

    the differences is
    `glob` will return a dynamic import function (lazy load)
    `globEager` will return the data of the file from the path directly

    if you use `glob`, don't forget `JSON.parse(JSON.stringify(**Your data**))`
    if you have trouble with this, use `globEager` may save your day
    ***/

    let modules = import.meta.globEager('/lang/*.json');
    locales.forEach(locale => {
        messages[locale] = modules[`/lang/${locale}.json`];
    });
}
else {
    // for webpack (storybook)
    locales.forEach(locale => {
        messages[locale] = require(`~/lang/${locale}.json`);
    });
}

export default ({ app, store }) => {
    app.i18n = new VueI18n({
        locale: store.getters['locale/locale'],
        messages
    });
}