快速使用

1、安装

npm i s94-i18n-replace -D

2、初始化配置

npx i18n-replace config

3、调整配置文件

初始化配置后会在项目的目录下生成 .i18n-replace.config.js 文件，内容大致为：

const config = {
    "title": "s94-i18n配置示例",
    "defaultLang": "zh", // 中文语言名称【必填】
    "messageLang": ["zh","en"], // 语言包名列表，作为合成语言包时的默认参数
    "exportDir": "src/i18n", //输出目录，执行替换后，会把替换的文本项目存储到该目录的 .txt 文件，组合语言包json文件也是在该目录下生成，默认为：执行目录
    "exportTextDir": "", //翻译文本 .txt 文件存放目录，相对于 exportDir，默认为：空
    "actionList": [ // 替换执行任务列表，可以配置多个用于分开管理【必填】
        {
            "files": ["src/views/**/*.vue"], //执行的文件集【必填】
            "ignore": { // 判断需要忽略的文件
                "files": [], // 文件集，固定包含：**/node_modules/**
                "methods": ['$t'], // 方法集，当中文字符作为该方法的第一个参数时忽略。固定包含：翻译方法(method的值)
            },
            "method": "i18nT", // 翻译方法名【必填】
            "methodDefine": `import { i18nT } from '@/i18n/index.js';`, // 翻译方法定义代码，会把这段代码加入到开头，用于定义翻译方法【仅针对于js代码】。可以为空
            "prefix": "common", //翻译key前缀，只能包含：数字、字母-_
        }
    ],
}

export default config;

根据项目需求，自行调整。

4、执行替换

执行以下命令替换项目中指定文件的中文部分为翻译方法

npx i18n-replace

5、翻译文本

• 到输出目录（例如：src/i18n）找到对应的中文语言txt文件（例如.zh.txt .zh.common.txt），全选复制文本到翻译软件，翻译成对应的语言
• 在输出目录，按中文语言txt文件的命名格式，创建其他语言的txt文件（如果已经存在跳过此步骤）
• 把软件翻译好的文本，粘贴到对应语言的txt文件中，要求行号和中文txt文件的行号对应
• 执行以下命令，合成语言包到输出目录。

npx i18n-replace message

6、代码更新后

后续在项目的代码更新后，只需要重复4、5项操作即可

特别提醒

• 在执行替换之前，强烈建议先提交版本管理，便于回溯。
• 输出目录中语言的txt文件，建议保留并加入版本管理，尤其是中文语言txt文件，是后续扩展其他语言时必须的依据

替换示例

替换前

<script setup>
import {ref} from "vue";

let data = {a:1, b:2, c:3}

let str1 = '普通文本';
console.log(str1);
let str2 = '中英 en 结合属性';
console.log(str2);
let str3 = '中英 en 结合属性\'带引号';
console.log(str3);
let str4 = "中英 en 结合属性\"带引号";
console.log(str4);
let str5 = data.c+'动态属性中英 en 结合属性\'带引号';
console.log(str5);

let str = ref('');

str.value = `${data.b}字符串模板参数${data.a}

模板换行${data.b}  模板换行${data.c}
模板无参数


`
function msg(v){
  alert(v);
}

console.log(str.value);
// js中的注释信息
</script>

<template>

  <!--  注释信息-->

  <div class="test" title="普通属性文本">
    普通内容文本
  </div>
  <div class="test" title="中英 en 结合属性">
    中英 en 结合属性文本
  </div>
  <div class="test" title="中英 en 结合属性'带引号">
    中英 en 结合属性'带引号
  </div>
  <div class="test" :title="data.c+'动态属性中英 en 结合属性\'带引号'">
    {{ data.c+'动态文本中英 en 结合属性\'带引号' }}
  </div>
  <div class="test" :title="`${data.c}动态模板属性中英 en 结合属性'带引号和\`号`">
    {{ `${data.c}动态模板属性中英 en 结合属性'带引号和\`号` }}
  </div>
  <div class="test" @click="msg(data.c+'动态属性中英 en 结合属性\'带引号')">
    点击事件
  </div>
  <div class="test" v-if="str!=='测试'" @click="str='测试'">
    判断，点击后修改str，然后消失<br>
    换行的内容
  </div>
</template>

<style scoped>
.test{min-height: 30px;border-bottom: 1px solid #999}
</style>

替换后

<script setup>
import { i18nT } from '@/i18n/index.js';
import {ref} from "vue";

let data = {a:1, b:2, c:3}

let str1 = i18nT('common.普通文本');
console.log(str1);
let str2 = i18nT('common.中英 en 结合属性');
console.log(str2);
let str3 = i18nT('common.中英 en 结合属性')+'\''+i18nT('common.带引号');
console.log(str3);
let str4 = i18nT('common.中英 en 结合属性')+'\"'+i18nT('common.带引号');
console.log(str4);
let str5 = data.c+i18nT('common.动态属性中英 en 结合属性')+'\''+i18nT('common.带引号');
console.log(str5);

let str = ref('');

str.value = i18nT('common.{var0}字符串模板参数{var1}', {'var0':data.b,'var1':data.a})+'\r\n\r\n'+i18nT('common.模板换行{var0}  模板换行{var2}', {'var0':data.b,'var2':data.c})+'\r\n'+i18nT('common.模板无参数')+'\r\n\r\n\r\n'
function msg(v){
  alert(v);
}

console.log(str.value);
// js中的注释信息
</script>

<template>

  <!--  注释信息-->

  <div class="test" :title="i18nT('common.普通属性文本')">
    {{ i18nT("common.普通内容文本") }}
  </div>
  <div class="test" :title="i18nT('common.中英 en 结合属性')">
    {{ i18nT("common.中英 en 结合属性文本") }}
  </div>
  <div class="test" :title="i18nT('common.中英 en 结合属性')+'\''+i18nT('common.带引号')">
    {{ i18nT("common.中英 en 结合属性") }}'{{ i18nT("common.带引号") }}
  </div>
  <div class="test" :title="data.c+i18nT('common.动态属性中英 en 结合属性')+'\''+i18nT('common.带引号')">
    {{ data.c+i18nT('common.动态文本中英 en 结合属性')+'\''+i18nT('common.带引号') }}
  </div>
  <div class="test" :title="i18nT('common.{var0}动态模板属性中英 en 结合属性', {'var0':data.c})+'\''+i18nT('common.带引号和`号')">
    {{ i18nT('common.{var0}动态模板属性中英 en 结合属性', {'var0':data.c})+'\''+i18nT('common.带引号和`号') }}
  </div>
  <div class="test" @click="msg(data.c+i18nT('common.动态属性中英 en 结合属性')+'\''+i18nT('common.带引号'))">
    {{ i18nT("common.点击事件") }}
  </div>
  <div class="test" v-if="str!==i18nT('common.测试')" @click="str=i18nT('common.测试')">
    {{ i18nT("common.判断，点击后修改str，然后消失") }}<br>
    {{ i18nT("common.换行的内容") }}
  </div>
</template>

<style scoped>
.test{min-height: 30px;border-bottom: 1px solid #999}
</style>

更新日志

20250808 v1.0.6

• 修复在判断是否需要插入定义翻译方法代码时，忽略了vue中的template代码。