Skip to main content

使用

安装​

npm install -g sugar18

yarn global add sugar18

pnpm add sugar18 --g

配置项​

配置项类型是否必填默认值解释
importPathstring当需要替换 JS 文件的中文文案时必填-指定在 VUE SFC 中自动中引入的vue-i18n对象的相对路径，详细见下文路径配置
patternstring否**/*.vuenode-glob匹配文件模式字符串
ignorestring或string[]否["node_modules/**"]node-glob配置项ignore
outputstring否i18n/zh-CN.json指定导出的中文 JSON 文件的路径

路径配置​

tvt内部会处理在 VUE 组件的script内部的中文字符，为了兼容位于export default {} 外部中文字符的情况，采用直接引入vue-i18n对象的方式，所以必须指定从vue-i18n导出的对象的全局相对路径，建议使用@别名的路径解析方式，利用webpack的resolve.alias配置也十分的简单：

const path = require("path");

module.exports = {
  //...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

或者在vue-cli中

const path = require("path");
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  },
};

vue-i18n 拓展​

对于模板字符串内部的JS表达式的值，需要使用特定的%s字符进行转换，因此需要对vue-i18n进行拓展

一般来说，vue-i18n的使用在<template>内部主要通过$t这样注入的方法，同时每个 VUE 组件中也都会包含一个$i18n对象，那么为了能够对在模板字符串内部的中文字符进行转换。那么我们对$i18n拓展出一个tExtend方法，用于处理在模板字符串内部中文字符的转换情况。

import Vue from "vue";
import VueI18n from "vue-i18n";
import cn from "./cn.json";

Vue.use(VueI18n);
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: "cn", // 设置地区
  fallbackLocale: "cn",
  messages: {
    cn,
  },
});

/**
 * 转换模板字符串内部%s字符的方法
 */
i18n.tExtend = (key, values) => {
  let result = i18n.t(key);

  if (Array.isArray(values) && values.length) {
    values.forEach((v) => {
      result = result.replace(/%s/, v);
    });
  }
  return result;
};

export default i18n;

CLI 命令​

只需要执行一个简单的命令trust即可

trust

示例​

例如如下 SFC 内部的插值语法中包含一个 JS 模板字符串如下：

<template>
  <div>
    {{ `你的钱包余额：${money}` }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 10,
    };
  },
};
</script>

经tvt提取的中文为：

{
  "9ef86bfdc5f84d52634c2732a454e3f8": "你的钱包余额：%s"
}

自动转换的结果为：

<div>
  {{ $i18n.tExtend('9ef86bfdc5f84d52634c2732a454e3f8', [money]) }}
</div>