为支持两个语言版本，我基于谷歌翻译API写了一款自动翻译的 webpack 插件

VUE_APP_ENV=prod
VUE_APP_PUBLIC_PATH=/mainland

VUE_APP_ENV=dev
VUE_APP_PUBLIC_PATH=/mainland

VUE_APP_ENV=ht
VUE_APP_PUBLIC_PATH=/ht
NODE_ENV=production

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:ht": "vue-cli-service build --mode ht",

<component :is="currentLogin" @sure="sure" cancel="cancel"></component>

data:{
    return {
        currentLogin: process.env.VUE_APP_ENV === 'ht' ? 'mainlandLogin' : 'htLogin'
    }
},
components: {
        mainlandLogin: () => import("./components/mainlandLogin.vue"),
        htLogin: () => import("./components/htLogin.vue"),
},
method:{
    sure(){
        this.$emit('sure')
    },
    cancel(){
        this.$emit('cancel')
    }
}

<login @sure="sure" cancel="cancel"></login>

const commodityList = [
    {
        id: 1
        name: "xxx",
        count:1,
        price:1,
        htPrice: 2
    }
]

{{ isHt ? `${commodity.htPrice} NT$` : `${commodity.price} ￥` }}

data() {
    return {
        isHt: process.env.VUE_APP_ENV === 'ht'
    }
}

https://translate.google.cn/?sl=zh-CN&tl=zh-TW&text=哈哈哈&op=translate

sl: 源语言; tl: 目标语言; text: 翻译的文本; op: translate (翻译)

export default class PagePool {
  private _pages: Page[] = [];
  private _pagesInUse: Page[] = [];
  constructor(private browser: Browser, private pageCount: number = 5) {
    pagePool = this;
  }
  public async init() {
    this._pages = await Promise.all(
      [...Array(this.pageCount)].map(() =>
        this.browser.newPage().then(async (page) => {
          await page.goto("https://translate.google.cn/", {
            waitUntil: "networkidle2",
          });
          return page;
        })
      )
    );
  }
}

fastify.get("/",
    async (request, reply) => {
      const { text, from = "auto", to = "zh-CN", lite = false } = request.query;
      const page = pagePool.getPage();
        await page.evaluate(([from, to, text]) => {
        location.href = `?sl=${from}&tl=${to}&text=${encodeURIComponent(
          text
        )}`;
      },
      [from, to, text]
    );

    // translating...
    await page.waitForSelector(`span[lang=${to}]`);

    // get translated text
    let result = await page.evaluate(
      (to) =>
        (document.querySelectorAll(`span[lang=${to}]`)[0] as HTMLElement)
          .innerText,
      to
    );
}

export const post = ((fastify, opts, done) => {
  fastify.post('/',async (request, reply) => {
      ...more...
    }
  );
  done();
});

  await page.evaluate(
    ([from, to]) => {
      location.href = `?sl=${from}&tl=${to}`;
    },
    [from, to]
  );

  await page.waitForSelector(`span[lang=${from}] textarea`);
  const fromEle = await page.$(`span[lang=${from}] textarea`);
  await page.evaluate((el, text) => {
    el.value= text
  },fromEle, text)
  // 模拟一次输入触发input事件，使得谷歌翻译可以翻译
  await page.type(`span[lang=${from}] textarea`, ' ');
  
 // translating...
  await page.waitForSelector(`span[lang=${to}]`);

  // get translated text
  const result = await page.evaluate(
    (to) =>
      (document.querySelectorAll(`span[lang=${to}]`)[0] as HTMLElement)
        .innerText,
    to
  );

const { sources, Compilation } = require('webpack');
// 日志输出文件
const TRANSFROMSOURCETARGET = 'transform-source-target.txt';
// 谷歌翻译一次最大支持字符
const googleMaxCharLimit = 5000;
// 插件名称
const pluginName = 'TransformLanguageWebpackPlugin';

class TransformLanguageWebpackPlugin {
  constructor(options = {}) {
     // 默认的一些参数
    const defaultOptions = { 
    translateApiUrl: '', from: 'zh-CN', to: 'zh-TW', separator: '-', 
    regex: /[\u4e00-\u9fa5]/g, outputTxt: false, limit: googleMaxCharLimit,
    };
    // translateApiUrl 翻译API必须传
    if (!options.translateApiUrl)
      throw new ReferenceError('The translateApiUrl parameter is required');
    // 将传入的参数与默认参数合并
    this.options = { ...defaultOptions, ...options };
  }
  // 添加apply方法，供webpack调用
  apply(compiler) {
    const {separator, translateApiUrl, from, to, regex, outputTxt, limit} = this.options;
    // 监听compiler 的thisCompilation 钩子
    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
     // 监听compilation 的processAssets 钩子
      compilation.hooks.processAssets.tapAsync(
        {
          name: pluginName,
          // stage 代表资源处理的阶段， PROCESS_ASSETS_STAGE_ANALYSE：analyze the existing assets.
          stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
        },
        // assets 代表所有chunk文件`路径及内容
        async (assets, callback) => {
           // TODO：在此处填充要实现的功能
        })
      })
  }
}

/**
 * @description 返回中文词组数组, 如: <p>你好</p><div>世界</div>,  返回： ['你好', '世界']
 * @param {*} content 打包后的bundle文件内容
 * @returns
 */
function getLanguageList(content, regex) {
  let index = 0,
    termList = [],
    term = '',
    list; // 遍历获取到的中文数组
  while ((list = regex.exec(content))) {
    if (list.index !== index + 1 && term) {
      termList.push(term);
      term = '';
    }
    term += list[0];
    index = list.index;
  }
  if (term !== '') {
    termList.push(term);
  }
  return termList;
}

let chunkAllList = [];
// 先将所有的chunk中的`指定字符词组`存起来
for (const [pathname, source] of Object.entries(assets)) {
    // 只读取js与html文件中的中文，其他的文件不需要
    if (!(pathname.endsWith('js') || pathname.endsWith('.html'))) {
      continue;
    }
    // 获取当前chunk的源代码字符串
    let chunkSourceCode = source.source();
    // 获取chunk中所有的中文。
    const chunkSourceLanguageList = getLanguageList(chunkSourceCode, regex);
    // 如果小于0，说明当前文件中没有 `指定字符词组`，不需要替换
    if (chunkSourceLanguageList.length <= 0) continue;
    chunkAllList.push({
      // 原文本数组
      chunkSourceLanguageList,
      // separator为分割符默认为： -
      chunkSourceLanguageStr: chunkSourceLanguageList.join(separator),
      // chunk原代码
      chunkSourceCode,
      // chunk的输出路径
      pathname,
    });
}

const chunkAllSourceLanguageStr = chunkAllList
.map((item) => item.chunkSourceLanguageStr).join(`_`);
    

// 合理的分割所有chunk中读取的字符，供谷歌API翻译，不能超过谷歌翻译的限制
const sourceList = this.getSourceList(chunkAllSourceLanguageStr, limit);

getSourceList(sourceStr, limit) {
    let len = sourceStr.length;
    let index = 0;
    if (limit) {
    }
    const chunkSplitLimitList = [];

    while (len > 0) {
      let end = index + limit;
      const str = sourceStr.slice(index, end);
      chunkSplitLimitList.push(str);
      index = end;
      len = len - limit;
    }
    return chunkSplitLimitList;
}

// 翻译
const tempTargetList = await Promise.all(
  sourceList.map(async (text) => {
    return await transform({
      translateApiUrl: translateApiUrl,
      text: text,
      from: from,
      to: to,
    });
  })
);

for (let i = 0; i < chunkAllList.length; i++) {
  const {
    chunkSourceLanguageStr,
    chunkSourceLanguageList,
    pathname,
    chunkSourceCode,
  } = chunkAllList[i];
  let sourceCode = chunkSourceCode;
  // 将简体转换为繁体
  targetList[i].split(separator).forEach((phrase, index) => {
    sourceCode = sourceCode.replace(
      chunkSourceLanguageList[index],
      phrase
    );
  });
 // 
  if (outputTxt) {
    writeContent += this.writeFormat(
      pathname,
      chunkSourceLanguageStr,
      targetList[i]
    );
  }
  compilation.updateAsset(pathname, new sources.RawSource(sourceCode));
}