Vue.js导入JSON存入Vuex后取值异常的解决方法问询

问题根因 #

你的项目中配置了vue-i18n对应的编译插件（webpack版为@intlify/vue-i18n-loader，vite版为@intlify/vite-plugin-vue-i18n），插件会自动匹配项目内的翻译JSON文件做预编译处理，所以你导入的en已经不是原始JSON对象，而是i18n处理后的可执行函数结构，直接访问字段自然拿到的是函数而非字符串。

可行解决方案 #

• 方案1：直接使用vue-i18n提供的翻译方法取值，不需要将翻译资源存入Vuex。对应取值写法为 $t('layout.sidebar.title')，即可直接拿到Test字符串，这是i18n项目的标准用法。
• 方案2：强制导入原始JSON内容，跳过i18n loader的预编译处理：
  • webpack环境写法：

    // 加前缀强制使用json-loader加载，跳过其他loader处理
    import en from '!!json-loader!@/locales/en-US.json';
    

  • vite环境写法：

    // 加?raw参数导入原始文件内容后自行解析
    import enRaw from '@/locales/en-US.json?raw';
    const en = JSON.parse(enRaw);
    

• 方案3：修改i18n插件配置，排除你存储静态翻译JSON的目录，不让插件对该目录下的文件做预编译，调整对应插件配置的include/exclude规则即可。

内容的提问来源于stack exchange，提问作者Kuba Kaczmarek