vue3.x使用i18n和i18n Ally自动化翻译

最新推荐文章于 2025-06-27 09:02:39 发布

小橙几

最新推荐文章于 2025-06-27 09:02:39 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： bug与解决方案文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_42174938/article/details/119764352

bug与解决方案专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue3.x项目中配置和使用vue-i18n进行国际化，并结合i18nAlly插件实现自动化翻译。详细步骤包括安装依赖、配置VSCode设置、创建i18n.js、配置main.js以及项目目录结构。通过这个教程，开发者可以高效地管理多语言内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为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

参考文档：