Vue.js 中导入的 json 值不正确答案

【问题标题】：Incorrect values in imported json in Vue.jsVue.js 中导入的 json 值不正确
【发布时间】：2021-11-17 17:33:48
【问题描述】：

我有一个 vuex 商店，里面有应用程序的所有翻译。翻译是从这样的 json 文件中导入的：

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

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

JSON 的内容如下所示：

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

但是当我访问 title 的值时，我得到了这个：

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

而不是 Test

我猜这可能与 webpack 配置有关，但我不确定。任何帮助将不胜感激。

【问题讨论】：

尝试像这样导入它：import * as en from '@/locales/en-US.json';
以这种方式导入它没有帮助，仍然获得相同的值。
显示您如何访问标题值
const store = useStore(); store.state.lang.lang.layout.sidebar.title
你有重复的lang

标签： json typescript vue.js

【解决方案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/**')
    })
  ]
})

【讨论】：