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

vue 版本> 3.0.0
vue/cli 版本 4.5.13
vue-i18n 版本 > 9.1.7

1.安装 i18n

npm install vue-i18n@next 

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,
      // "i18n-ally.extract.keygenStrategy": "random", // 翻译字段命名采用随机字符 枚举['slug','random','empty']
    // "i18n-ally.extract.keygenStyle": "camelCase", // 翻译字段命名样式采用驼峰
}

4.配置i18n.js

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

export default i18n

5.配置main.js

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

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

项目目录结构

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