Блог

Главная - Вопросы по программированию - Неверные значения в импортированном json в Vue.js

Неверные значения в импортированном json в Vue.js

#json #typescript #vue.js

Вопрос:

У меня есть магазин vuex, в котором у меня есть все переводы для приложения. Переводы импортируются из файла json, подобного этому:

 import en from '@/locales/en-US.json';

const question: Module<State, any> = {
  namespaced: true,
  state: {
    lang: en,
  }
}

Содержимое JSON выглядит следующим образом:

 {
  "layout": {
    "sidebar": {
      "title": "Test"
    }
  }
}

Но когда я получаю доступ к значению заголовка, я получаю это:

 (ctx) => {const { normalize: _normalize } = ctx;return _normalize(["Test"])}

Вместо
Test

Я предполагаю, что это может быть как-то связано с конфигурацией веб-пакета, но я не уверен. Любая помощь будет высоко оценена.

Комментарии:

1. Попробуйте импортировать его, как: import * as en from '@/locales/en-US.json';

2. Импорт его таким образом не помогает, все равно получая то же значение.

3. Покажите, как вы получаете доступ к значению заголовка

4. const store = useStore(); store.state.lang.lang.layout.sidebar.title

5. у вас есть дубликат lang

Ответ №1:

Это связано с тем, что ваш файл предварительно скомпилирован @intlify/vite-plugin-vue-i18n

Видишь https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n/v/2.0.1

Чтобы преодолеть эту проблему, укажите путь для vite-plugin-vue-i18n .

 export default defineConfig({
  plugins: [
    vue(), 
    vueI18n({
      // you need to set i18n resource including paths !
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ]
})
Метки: