工具及环境说明

本文所有的示例基于以下环境：

开发工个：

前端框架：

国际化前端库：

VSCode插件：

国际化开发时的痛点

1. vue文件中写静态文本后，需要打开国际化文件，增加相应的键。
2. 写完中文文案后需要翻译成英文再写一遍。
3. 树状结构的国际化文件层级太深，查找麻烦。
4. 查看代码时一堆{{$t(’xxx.xxxx’)}} 阅读很不友好。
5. 部分遗漏没有国际化的文字成了漏网之鱼。
6. 当前各个语言的翻译进度没有直官统计。

集成 vue-i18n

// 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')

// 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 下，这是与****的约定，当然也可以改。下文中讲到配置时再说。

安装

安装完多一个工具bar

打开一个有国际化的文件，自动显示了具体文案。

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

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

插件配置

在项目根路径下的.vscode 文件夹下的settings.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 插件。

{
  "recommendations": ["lokalise.i18n-ally"]
}

补充说一下，上面json中的lokalise.i18n-ally 是从哪里找到的？其实就是它在插件市场中的官方名字啦。

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