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

原创已于 2025-03-17 14:55:58 修改 · 2.4k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #i18n #国际化 #翻译 #vite #react #插件

于 2025-03-17 14:54:01 首次发布

工具使用专栏收录该内容

12 篇文章

订阅专栏

文章目录

前言
一、安装插件
二、配置项目
三、使用方式
总结

前言

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

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

GitHub仓库：自动翻译插件 🚀

在这里插入图片描述

一、安装插件

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

使用npm安装

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

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

使用yarn安装

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

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

使用 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。
在这里插入图片描述

登录有道智云，添加微信客服即可获取50元体验金，创建一个新的应用。
获取 appId 和 appKey。
在 vite.config.ts 或 webpack.config.js 中配置翻译器：

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

2. 谷歌翻译

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

确保你的代理工具已启用。
查看你的本地代理端口，例如 13385。
在 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。

登录百度翻译管理控制台。
填写相关信息。

点击左上角回到主页
再次点击管理控制台，点击立即开通后选择需要开通的服务和功能
获取 appId 和 appKey。
在 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 进行前端项目的自动化国际化翻译，并探讨了该插件在提升开发效率方面的重要性。文章从插件的安装和配置开始，逐步讲解了多种翻译服务的集成方式，并提供了详细的代码示例。希望这篇文章能帮助你更好地理解和应用自动化国际化翻译插件。如果你有任何疑问或建议，欢迎在评论区留言讨论🌹