前端国际化开发最佳实践

工具及环境说明

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

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

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

相关推荐
醉の虾9 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧17 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm27 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep70139 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm43 分钟前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter