Vue-i18n读取含非ASCII字符的JSON文件时为何触发插件错误？

问题详情 #

我正按照Vue I18n的TypeScript类型安全方案，从JSON文件读取i18n字符串。现有en-US.json文件：

{ 
  "world": "the world!"
}

Vue应用配置代码如下：

import { createI18n } from 'vue-i18n'
import enUS from '../src/i18n/en-US.json'

// 定义'en-US'作为资源的主类型 schema
type MessageSchema = typeof enUS

const i18n = createI18n<[MessageSchema], 'en-US'>({
  locale: 'en-US',
  messages: {
    'en-US': enUS
  }
})

原本代码运行正常，但在JSON中添加非ASCII字符（比如"world": "the wörld!"）时，会触发报错：

[plugin:vite-plugin-vue-i18n] Cannot read properties of undefined (reading 'message')
/home/bernhard/wd/quasar2-project/src/i18n/en-US.json

但直接在.ts文件中定义相同内容的对象，却能正常工作：

const enUS = {
   "world": "the wörld!"
}

解决办法 #

1. 检查并修正JSON文件编码 #

这类问题大概率是JSON文件编码不对导致的。用编辑器（比如VS Code）打开en-US.json，将其保存为UTF-8编码（不要带BOM）：

• VS Code可以点击右下角的编码选项，选择"UTF-8"后重新保存文件。

2. 调整vite-plugin-vue-i18n插件配置 #

在项目的vite.config.ts（如果是Quasar项目则修改quasar.conf.js）中，给vue-i18n插件添加forceStringify配置，强制以字符串方式解析JSON内容：

import { defineConfig } from 'vite'
import vueI18n from '@intlify/vite-plugin-vue-i18n'
import path from 'path'

export default defineConfig({
  plugins: [
    vueI18n({
      include: path.resolve(__dirname, './src/i18n/**'),
      forceStringify: true // 启用该配置避免编码解析问题
    })
  ]
})

3. 验证JSON语法合法性 #

确保JSON文件没有语法错误，非ASCII字符无需额外转义，直接写入即可（比如"world": "你好世界"是合法的JSON格式）。

4. 临时替代：改用.ts文件存储资源 #

如果上述方法都无效，可以暂时把JSON内容迁移到.ts文件中，像测试那样直接定义对象，既保留TypeScript类型安全，又能避开JSON编码问题：

// src/i18n/en-US.ts
export default {
  world: "the wörld!"
}

然后在i18n配置中导入这个.ts文件即可。

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