vue 使用i18n和i18n Ally自动化翻译

以下为vue2.x使用i18n和i18n Ally自动化翻译的步骤, vue3.x配置步骤>>

vue 版本 > 2.6.12
vue-i18n 版本 > 8.25.0

1.安装 i18n

npm install vue-i18n --save-dev

2.在vscode中安装i18n Ally插件

3.配置vscode setting.json

{
 "i18n-ally.localesPaths": ["src/locales"], // 翻译文件路径
  "i18n-ally.keystyle": "nested", // 翻译路径格式,
  "i18n-ally.sourceLanguage": "zh-CN", // 翻译源语言
  "i18n-ally.displayLanguage": "zh-HK", //显示语言， 这里也可以设置显示英文为en
}

4.配置i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './locales/en'
import usLocal from './locales/zh-CN'
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale
  },
  cn: {
    ...usLocal
  }
}
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'cn',
  messages
})

export default i18n

5.配置main.js

import i18n from './i18n'
new Vue({
  el: '#app',
  router,
  i18n,
  render: h => h(App)
})

6.在i18n ally 侧边工具栏栏进行自动翻译和应用翻译

7.使用

项目目录结构

src  
├── locales
|   ├── en.json
|   ├── zh-CN.json
|   └── zh-HK.json
├──  i18n.js    
└──  main.js 

参考文档：

1. https://github.com/lokalise/i18n-ally
2. https://toscode.gitee.com/antfu/i18n-ally
3. https://ilandychiu.medium.com/vue-i18n-%E8%88%87-i18n-ally-1a047b2429eb