前端国际化开发最佳实践

工具及环境说明

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

开发工个:VSCode

前端框架:Vue3

国际化前端库:vue-i18n

VSCode插件:i18n Ally

国际化开发时的痛点

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

集成 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 是从哪里找到的?其实就是它在插件市场中的官方名字啦。

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

相关推荐
EricWang135815 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning15 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人25 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js