还在手写翻译文件？这个插件让你的前端国际化快10倍！_auto-i18n-translation-plugins

文章目录

• 前言
• 一、安装插件
• 二、配置项目
• • 1. 有道翻译
  • 2. 谷歌翻译
  • 3. 百度翻译
• 三、使用方式
• • 1. 引入自动生成的翻译文件
  • 2. 运行开发服务器
  • 3. 切换语言
• 总结

前言

在前端项目中实现国际化（i18n）通常需要手动维护翻译文件，添加 i18n 组件，并在代码中替换文本内容。这一过程不仅繁琐，而且容易出错。而 auto-i18n-translation-plugins 是一款自动化国际化翻译插件，能够帮助开发者轻松实现国际化翻译。

该插件无需复杂配置，也无需修改业务代码，从而大大提高了开发效率。本文将介绍如何使用该插件完成自动化国际化翻译，并结合有道翻译、谷歌翻译和百度翻译的集成方案。

GitHub仓库：自动翻译插件 🚀

一、安装插件

该插件支持 Vite 和 Webpack，因此可根据自己的项目选择相应的版本安装：

1. 使用npm安装

# Vite 项目npm install vite-auto-i18n-plugin --save-dev# Webpack 项目npm install webpack-auto-i18n-plugin --save-dev

2. 使用yarn安装

# Vite 项目yarn add vite-auto-i18n-plugin -D# Webpack 项目yarn add webpack-auto-i18n-plugin -D

3. 使用 pnpm 安装

# Vite 项目pnpm add vite-auto-i18n-plugin -D# Webpack 项目pnpm add webpack-auto-i18n-plugin -D

二、配置项目

在 vite.config.ts 文件中配置 vite-auto-i18n-plugin 插件，以下三种翻译方式任选其一。

import { defineConfig } from \'vite\'import react from \'@vitejs/plugin-react-swc\'import vitePluginsAutoI18n, { YoudaoTranslator, GoogleTranslator, BaiduTranslator } from \'vite-auto-i18n-plugin\'const i18nPlugin = vitePluginsAutoI18n({ globalPath: \'./lang\', // 存放翻译文件的目录 namespace: \'lang\', // 命名空间 distPath: \'./dist/assets\', distKey: \'index\', targetLangList: [\'en\', \'ko\', \'ja\'], // 目标语言列表，英文，韩文，日文 originLang: \'zh-cn\', // 选择翻译器，有道、谷歌或百度 // 有道翻译 // translator: new YoudaoTranslator({ // appId: \'你的AppId\', // appKey: \'你的AppKey\' // }) // 谷歌翻译（需配置代理） translator: new GoogleTranslator({ proxyOption: { host: \'127.0.0.1\', port: 13385, headers: { \'User-Agent\': \'Node\' } } }) // 百度翻译 // translator: new BaiduTranslator({ // appId: \'你的AppId\', // appKey: \'你的AppKey\' // })})// https://vite.dev/config/export default defineConfig({ plugins: [ react(), i18nPlugin ],})

1. 有道翻译

如果使用有道翻译，需要在 有道智云 AI 开放平台🚪 创建应用，获取 appId 和 appKey。

1. 登录有道智云，添加微信客服即可获取50元体验金，创建一个新的应用。
   

2. 获取 appId 和 appKey。
   

3. 在 vite.config.ts 或 webpack.config.js 中配置翻译器：

translator: new YoudaoTranslator({ appId: \'你的AppId\', appKey: \'你的AppKey\'})

2. 谷歌翻译

如果选择谷歌翻译，需要配置代理。

1. 确保你的代理工具已启用。

2. 查看你的本地代理端口，例如 13385。
   

3. 在 vite.config.ts 或 webpack.config.js 中配置：

translator: new GoogleTranslator({ proxyOption: { host: \'127.0.0.1\', port: 13385, headers: { \'User-Agent\': \'Node\' } }})

3. 百度翻译

如果使用百度翻译，需要在 百度翻译 API🚪 创建应用，并获取 appId 和 appKey。

1. 登录百度翻译管理控制台。
   
2. 填写相关信息。
   
   点击左上角回到主页
   
3. 再次点击管理控制台，点击立即开通后选择需要开通的服务和功能
   
4. 获取 appId 和 appKey。
   
5. 在 vite.config.ts 或 webpack.config.js 中配置：

translator: new BaiduTranslator({ appId: \'你的AppId\', appKey: \'你的AppKey\'})

三、使用方式

1. 引入自动生成的翻译文件

在 main.tsx 中引入：

import \'../lang/index\';

2. 运行开发服务器

pnpm dev

插件会自动创建 lang 文件夹，结构如下：

/lang ├── index.js // 负责翻译逻辑 ├── index.json // 生成的翻译文本

index.json 是翻译的核心文件，存储了所有翻译内容，并使用 hash 作为唯一标识，相同的文本不会被重复翻译。如果发现翻译不准确，可以手动修改 index.json。

现在只需要打开提供的端口127.0.0.1:3000访问页面，这个插件就会自动运行翻译，并且修改index.json文件

3. 切换语言

切换语言只需要用到这个changeLang()函数，设置浏览器localStorage的lang属性为其他语言，如：zhcn、en、ko、ja等

示例：

• 中文：
  

• 英文：
  

• 韩文：
  

• 日文：
  

总结

通过本文，我们详细介绍了如何使用 auto-i18n-translation-plugins 进行前端项目的自动化国际化翻译，并探讨了该插件在提升开发效率方面的重要性。文章从插件的安装和配置开始，逐步讲解了多种翻译服务的集成方式，并提供了详细的代码示例。希望这篇文章能帮助你更好地理解和应用自动化国际化翻译插件。如果你有任何疑问或建议，欢迎在评论区留言讨论🌹

GitHub仓库 📌