Vue-i18n踩坑记录

用户59561957545232025-10-20 11:15

因为最近的一个Vue项目要上线国际版了，需要在中文版的基础上增加一个英文版。i18n虽然很方便，但还是有不少坑，记录在这里。

现在Vue-i18n的12+版本还没有太好的支持，建议使用9+版本。

text 复制代码

npm install vue-i18n@9

Vue-i18n是支持插值文本的，但插值用单括号。使用时用对象传入

js 复制代码

// en.ts
const en = {
    hint: "{ count } files in total, { selected } selected"
}

html 复制代码

<div class="selected-count">{{ t('upload.uploadTable.hint', {
        count: rows.length,
        selected: selectedFiles.length
    }) }}
</div>

列表渲染的中文文本在添加国际化后，不能用ref，ref也不能响应。必须用computed

js 复制代码

const headers = computed(() => [
    { label: t('upload.table.selected'), key: '已选择', width: '60px' },
    { label: t('upload.table.id'), key: 'id', width: '130px' },
    { label: t('upload.table.filename'), key: '文件名', width: '160px' },
    { label: t('upload.table.expireTime'), key: '过期时间', width: '130px' },
    { label: t('upload.table.operation'), key: '操作', width: '160px' }
])

大部分中文转英文后文本会变长，需要换行或改元素宽度

html 复制代码

<Button :width="locale === 'en' ? '130px' : '140px'" @click="handleConfirmUpload">
    {{t('upload.buttons.confirm')}}
</Button>

中文不需要考虑复数，英文还要加一层if判断，多于一个需要加复数

遇到问题再更新