vue 前端国际化方案

news2025/2/24 16:30:06

方案介绍：

1.使用i18n（使用步骤可百度，要注意版本问题）
2.整合ele-ui的国际化方案（百度，几行添加一下即可）
3.数据信息的配置（重头戏，以下详细介绍）excel转json

数据配置

当前大多数使用的方案是json里面放中英文，例如

// english.json
{
short: 'test abc'
}

// 中文.json
{
short: '测试ABC'
}

excel转json方案

我采用的方案是直接中文对照英文，对于代码来说，可读性强一些；例如：

this.$t(short)

这句话看到了之后并不知道展示的啥，
但是如果用this.$t('测试ABC‘）

不会影响代码的可读性，同时，假使测试ABC对应的英文不存在，也不会影响页面的展示。

所以，excel里面的配置就如下如所示
在这里插入图片描述

excel转json的代码实现

var fs = require('fs')
var xlsx = require('xlsx') // xlsx读表格

exports = module.exports = xlsxTojson

function xlsxTojson (config, callback) {
  if (!config.input) {
    console.error('You need input file')
    process.exit(1)
  }
  return new CV(config, callback)
}
function CV (config, callback) {
  // 构造函数
  var wb = this.load_xlsx(config.input)
  var ws
  var csv = []
  if (wb.SheetNames.length > 0) {
    for (let i = 0; i < wb.SheetNames.length; i++) {
      const temp = wb.SheetNames[i]
      ws = this.ws(temp, wb)
      csv = csv.concat(this.csv(ws, config))
    }
  }
  this.cvjson(csv, config.output, callback)
}
CV.prototype.load_xlsx = function (input) {
  // 读文件
  return xlsx.readFile(input)
}

CV.prototype.ws = function (sheet, wb) {
  return wb.Sheets[sheet]
}
CV.prototype.csv = function (ws) {
  // 文件内容转json
  return xlsx.utils.sheet_to_json(ws)
}
CV.prototype.cvjson = function (csv, output, callback) {
  const stream = fs.createWriteStream(output, { flags: 'w' })
  stream.write(JSON.stringify(csv))
}

代码是可以精简的，是复制的，能用就没改。

再加一些配置，那么运行的时候，npm run XXX，就能实现将excel转成json了。

使用

1.html中使用
例如

<input label='名称'>
国际化写法：
<input :label="$t('名称')">

<div>名称</div>
国际化写法
<div>{{$t('名称')}}</div>

2.js中使用

this.$t('名称')
或者
this.$t(name) // name是另外定义的
或者
在一些公共方法中，有的时候还拿不到this
import i18n from '../assets/lang' // 国际化配置的路径
i18n.t('名称')

或者，一些特殊的，例如：删除某条表格的数据，您需要删除XXX吗？
可以用this.$t('您需要删除XXX吗？').replace('XXX', this.name)
需要注意的是英文配置的时候也是XXX：Do you want to delete XXX?

3.css中使用（伪类）
例如：

.dom::before {
content: '测试';
}
国际化写法
// 用data属性存放已经翻译好的文案
<div class='dom' data-suffix="测试"></div>
// 在css中读出data-suffix的值作为content的内容， 可以使用attr()来获取指定的属性
 .dom::before  {
  content: attr(data-suffix)
  }