auto-i18n-translation-plugins: A Full-Automatic Frontend Internationalization Plugin for Vite and Webpack

🚀 Introduction

Hello everyone! Previously we introduced the Vite plugin vite-plugin-auto-i18n , an automatic translation i18n plugin, but it was not perfect. One year later we present the upgraded frontend internationalization plugin—more compatible, adaptable, and stable.

Internationalization is a pain point for large projects, often requiring manual text replacement and configuration maintenance, which is inefficient and labor‑intensive. Our solution is a Babel‑based automatic translation plugin called auto-i18n-translation-plugins , which generates translation keys via a hash algorithm and produces a JSON configuration file.

Key points: the plugin parses target characters, translates them uniformly, and allows manual correction of the generated JSON if Google Translate is inaccurate. It improves workflow efficiency for internationalization.

🏆 Core Features

🛠️ No business code changes : one‑click multi‑language translation.

🌐 Multiple translation services (Google, Youdao, custom translators).

🥵 Supports all front‑end frameworks compiled to JS (Vue2/3, React).

🉑️ Compatible with mainstream build tools (Vite, Webpack, Rollup).

🔍 Intelligent detection of text needing translation.

🔧 Flexible configuration options for various project needs.

🆕 Supports adding new languages with automatic configuration.

🌍 Multi‑language support .

📖 Plugin Overview

auto-i18n-translation-plugins includes sub‑plugins for Vite ( vite-auto-i18n-plugin ) and Webpack ( webpack-auto-i18n-plugin ) that provide one‑click translation and auto‑completion.

🌟 Quick Start

1️⃣ Install the plugin

Vite project

npm install vite-auto-i18n-plugin --save-dev
# or
yarn add vite-auto-i18n-plugin --dev

Webpack project

npm install webpack-auto-i18n-plugin --save-dev
# or
yarn add webpack-auto-i18n-plugin --dev

2️⃣ Configuration Example

Vite configuration (vite.config.js)

import { defineConfig } from 'vite';
import vitePluginAutoI18n from 'vite-auto-i18n-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      template: { compilerOptions: { hoistStatic: false, cacheHandlers: false } }
    }),
    vitePluginAutoI18n({
        targetLangList: ['en', 'ko', 'ja'],
        translator: new YoudaoTranslator({
          appId: '4cdb9baea8066fef',
          appKey: 'ONI6AerZnGRyDqr3w7UM730mPuF8mB3j'
        })
    })
  ]
});

Webpack configuration (webpack.config.js)

const webpackPluginsAutoI18n = require('webpack-auto-i18n-plugin');
const { YoudaoTranslator } = require('webpack-auto-i18n-plugin');

const i18nPlugin = new webpackPluginsAutoI18n.default({
  targetLangList: ['en', 'ko', 'ja', 'ru'],
  translator: new YoudaoTranslator({
    appId: '4cdb9baea8066fef',
    appKey: 'ONI6AerZnGRyDqr3w7UM730mPuF8mB3j'
  })
});

module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    i18nPlugin
  ]
};

3️⃣ Translator Configuration

The plugin uses Google Translate by default; you can configure a proxy or switch to Youdao for better results.

Google Translator (default)

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

Youdao Translator

translator: new YoudaoTranslator({
  appId: '4cdb9baea8066fef',
  appKey: 'ONI6AerZnGRyDqr3w7UM730mPuF8mB3j'
});

4️⃣ Entry File Configuration

Import the generated language file at the top of your entry (e.g., main.js ).

import '../lang/index'; // Must be the first line in the entry file; this file is auto‑generated by the plugin.

5️⃣ Usage Demo (GIFs)

Examples for Vite+Vue3, Vite+Vue2, Webpack+React, and Webpack+Vue3 are shown as animated GIFs in the original article.

⚙️ Configuration Parameters

Parameter

Type

Required

Default

Description

translateKey

string

✅

$t

Function name used in code for language switching.

excludedCall

string[]

❌

['$i8n', 'require', …]

List of function calls that should not be translated.

excludedPattern

RegExp[]

❌

[/\.\w+$/]

Patterns of strings to exclude, e.g., file extensions.

excludedPath

string[]

❌

['node_modules']

Directories to exclude from translation.

includePath

RegExp[]

❌

[/src\/]/

Whitelist of directories to translate (default: src).

globalPath

string

❌

'./lang'

Location where translation config files are generated.

distPath

string

✅

''

Output directory after build.

distKey

string

✅

'index'

Main filename of the generated file.

namespace

string

✅

'lang'

Project namespace to differentiate translation configs.

originLang

string

✅

'zh-cn'

Source language.

targetLangList

string[]

✅

['en']

List of target languages.

buildToDist

boolean

❌

false

Whether to bundle the generated translation file into the main bundle after build.

translator

Translator

❌

GoogleTranslator

Instance of the translator (Google or Youdao).

translatorOption

object

❌

{}

Additional translator options (lower priority than

translator

).

❓ Why buildToDist ?

In Vite, the plugin only generates the translation config file; it is not automatically bundled. Enabling buildToDist forces the file into the main bundle, though it may create duplicate config files.

🔄 How to Update Translations?

After the plugin runs, the globalPath directory contains index.js (logic) and index.json (translation content). You can manually edit index.json to update translations.

⚠️ Usage Notes

Proxy Requirements : Domestic users should use Youdao (no proxy). Google requires a proxy, default port 7890, configurable via proxyOption .

Translation Frequency : Google is free but may limit frequent requests; add delays between calls.

Update Mechanism : Modifying index.json updates translations instantly.

Vue3 Static Node Caching : Vue3 does not compile static nodes; force compilation for translation.

📦 Example Project

See the full example repository for a working demo.

📜 License

The plugin is released under the MIT License and welcomes contributions.

⚙️ Mechanism Overview

Parses JavaScript files to extract translatable text using vite-plugin-auto-i18n after converting special files.

Generates a folder with a JSON file containing translations; you can edit the JSON directly.

Translation keys are hash‑based; unchanged text retains the same key.

Missing translations are auto‑filled from the source language when new languages are added.

🏆 Acknowledgements

Thanks to contributors: Fan, Yang, Hong, and others.