工具及环境说明
本文所有的示例基于以下环境:
开发工个:VSCode
前端框架:Vue3
国际化前端库:vue-i18n
VSCode插件:i18n Ally
国际化开发时的痛点
- vue文件中写静态文本后,需要打开国际化文件,增加相应的键。
- 写完中文文案后需要翻译成英文再写一遍。
- 树状结构的国际化文件层级太深,查找麻烦。
- 查看代码时一堆
{{$t('xxx.xxxx')}}
阅读很不友好。 - 部分遗漏没有国际化的文字成了漏网之鱼。
- 当前各个语言的翻译进度没有直官统计。
集成 vue-i18n
js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from '@/langs/index.js'
const app = createApp(App)
app.use(i18n)
app.mount('#app')
js
// langs/index.js
import zh from './zh-CN.json'
import en from './en.json'
import { createI18n } from 'vue-i18n'
const messages = {
'en-US': en,
'zh-CN': zh,
}
const i18n = createI18n({
legacy: false,
locale: 'zh-CN', // set locale
fallbackLocale: 'en-US', // set fallback locale
messages,
})
export default i18n
文件结构如下图,把国际化json文件放成 src/langs 下,这是与**i18n Ally**的约定,当然也可以改。下文中讲到配置时再说。

安装i18n Ally

安装完多一个工具bar
打开一个有国际化的文件,自动显示了具体文案。

鼠标悬浮后可以快速修改或指定各语言文案,如果某一语种的国际化文件中缺少此键时,会自动创建。

点击地球图标可以自动补充该语言中没有翻译的项,不过翻译得是不是准确还需要你再确认。

插件配置
在项目根路径下的.vscode
文件夹下的settings.json
加入下面几个配置。
json
{
"i18n-ally.localesPaths": "public/locales", // 上面提到的国际化文件放在 src/langs 下是约定,可以通过这个配置项改
"i18n-ally.keystyle": "nested", // nested | flat,生成的国际化json文件格式:flat({"a.b.c": "..."}) 或 nested({"a": {"b": {"c": "..."}}})
"i18n-ally.displayLanguage": "zh" // 默认显示的语言,效果就如上面的截图中,在vue文件中看到的文案都是中文
}
完整的配置,在这里
团队合作
最后为了与参与合作的小伙伴一起使用你配好的这一套国际化开发环境,在.vscode
中建一个文件extensions.json
内容如下,表示打开这个项目时弹出推荐安装i18n-ally
插件。
json
{
"recommendations": ["lokalise.i18n-ally"]
}
补充说一下,上面json中的lokalise.i18n-ally
是从哪里找到的?其实就是它在插件市场中的官方名字啦。

这样别人在打开这个项目时右下角会弹类似这样的提示:
