Vue-i18n国际化多语言-在线表格翻译

技术栈：Vue-i18n+NodeJS

简介

因目前项目开发过程中，产品往往无法及时提供已经翻译好的多语言，大部分时候需要在项目开发完成后，额外进行多语言替换操作，此操作会降低开发效率且技术含量低。
经了解，可是通过在线表格的方式，拉取最新的多语言，在编译前执行已经封装好的操作，便可直接替换已有翻译，降本提效。
于是，有了这篇文章。
原理：在编译前，拉取在线表格数据，替换本地多语言配置文件。

工具使用

在线表格平台 - 维格表

支持团队进行在线多人协作，表格内容丰富，开放api支持表格管理与数据拉取。目前根据需要仅使用基础表格。
在个人工作台中创建工作区、文件，添加对应团队人员。
因实际系统计较庞大。分成多个业务模块，于是需要进行label分组。

数据拉取

其实Vika官方获取数据示例用的有cURL、JavaScript（安装via SDK）、Python等。
但本篇，目前采用的是JS+Axios。
安装axios，以请求接口。

文件写入

文件写入部分采用NodeJS的内置模块fs。

逻辑代码

数据获取

const axios = require("axios");

/** 获取在线表格 */
function getAllTemplateLang() {
  return new Promise((resolve, reject) => {
    axios
      .get(
        "https://api.vika.cn/fusion/v1/datasheets/【文件ID】/records?viewId=【视图ID】&fieldKey=name",
        {
          headers: { Authorization: "Bearer【用户API_Token】" },
        }
      )
      .then((res) => resolve(res.data))
      .catch((err) => reject(err));
  });
}

数据结构处理

首先需要将接口返回的数据结构处理成需要的多语言结构。
其次，需要序列化数据，让其呈现易于理解的格式。

const chartLangLabels = ['zh', 'en', 'fr'] // 表格语言对应的label字段

/** 工具函数：处理数据结构 */
const handleLangData = (data) => {
  // 目标数据结构, 类似于 { zh:{} ,en: {}, fr: {}}
  const resData = {}
  chartLangLabels.forEach((langLabel) => {
    resData[langLabel] = {}
  })
  data.forEach((item) => {
    const fields = item.fields
    const labelWrapper = fields.LabelWrapper // LabelWrapper 外层label，业务模块
    const labelInner = fields.LabelInner // LabelInner 内层label（因为有多个业务模块 所以加了一层嵌套）
    chartLangLabels.forEach((currLang) => {
      if (!resData[currLang][labelWrapper]) resData[currLang][labelWrapper] = {} // 业务模块多语言undefined时，创建{}
      resData[currLang][labelWrapper][labelInner] = fields[currLang]
    })
  })
  return resData
}

/** 工具函数：序列化JSON字符串 */
const outputJSONString = (obj = {}, prot, tab = 4) => {
  // 去掉首部的{和空格，去掉尾部的}和换行
  return `${JSON.stringify(obj, prot, tab).replace(/(^{\s*)|(}\n*$)/g,"")}`;
};

拼接写入

注意：文件写入的路径需要根据实际情况进行调整，并以项目根目录为基准，配置需要输出的文件路径。

const fs = require("fs");

const getPageLang = () => {
  getAllTemplateLang().then((res) => {
    const data = res.data
    console.log(data.records)
    let resData = handleLangData(data.records)
    chartLangLabels.forEach((lang) => {
      let str = `export default {\n    ${outputJSONString(resData[lang], undefined, 4)}}`
      // 文件写入，文件名与chartLangLabels内保持一致
      fs.writeFile(`./src/lang/web/${lang}.ts`, str, 'utf-8', function (err) {
        if (err) {
          console.log(lang + '写文件操作失败')
          console.log(err)
        } else console.log(lang + '写文件操作成功')
      })
    })
  })
}

快捷指令配置

packge.json中快捷命令配置

至此，就可以项目根文件目录下执行此命令实现多语言翻译的更新。

npm run i18n:update

注意： 此处相对路径是项目根目录为基准进行匹配的。

效果

控制台

控制台会输出函数中打印的相关数据。

文件目录

此工具函数的文件夹下会出现三个文件。

文件内容

实际是文件内容类似于这样。

后续

后续即可根据正常操作，引入此多语言文件进行配置。
具体参考本博客多语言相关内容。
Vue-i18n国际化多语言配置
VUE3 +TypeScript + i18n多语言结合使用

扩展

本地excel方法实现

除此之外，还可对本地excel进行多语言翻译数据读取。

安装xlsx

xlsx需要手动安装。

npm install xlsx

本地excel文件

完整代码

import xlsx from 'xlsx'

/** 获取excel数据并解析 */
const getExcelData = (url) => {
  const workBook = xlsx.readFile(url) // 目标文件获取
  let name = workBook.SheetNames[0] // 读取表格中第一个表
  let sheet = workBook.Sheets[name] // 数据获取
  console.log(xlsx.utils.sheet_to_json(sheet)) // 数据格式转换
  return xlsx.utils.sheet_to_json(sheet)
}

/** 处理excel表格的数据 */
const handleExcelData = (data) => {
  // 目标数据结构, 类似于 { zh:{} ,en: {}, fr: {}}
  const resData = {}
  chartLangLabels.forEach((langLabel) => {
    resData[langLabel] = {}
  })
  data.forEach((item) => {
    const labelWrapper = item.LabelWrapper // LabelWrapper 外层label，业务模块
    const labelInner = item.LabelInner // LabelInner 内层label（因为有多个业务模块 所以加了一层嵌套）
    chartLangLabels.forEach((currLang) => {
      if (!resData[currLang][labelWrapper]) resData[currLang][labelWrapper] = {} // 业务模块多语言undefined时，创建{}
      resData[currLang][labelWrapper][labelInner] = item[currLang]
    })
  })
  return resData
}

/** 读写数据 */
const writeData = (targetData) => {
  chartLangLabels.forEach((lang) => {
    let str = `export default {\n    ${outputJSONString(targetData[lang], undefined, 4)}}`
    // 文件写入，文件名与chartLangLabels内保持一致
    fs.writeFile(`./src/lang/web/${lang}.ts`, str, 'utf-8', function (err) {
      if (err) {
        console.log(lang + '写文件操作失败')
        console.log(err)
      } else console.log(lang + '写文件操作成功')
    })
  })
}

// 实际操作
let resData = getExcelData('./src/utils/lang.xlsx') // excel数据
const targetData = handleExcelData(resData) // 得到需要的数据结构
writeData(targetData) // 文件读写

实际效果与之前一致。