项目场景:
在项目中对表格标题进行国际化时报错,奇怪的是表单国际化没问题,表格国际化报错。
报错信息如下:
Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
at createCompileError (message-compiler,esm-bundler.js:54:19)
at createI18nError (vue-i18n.esm-bundler.js:100:12)
at useI18n (wue-i18n.esm-bundler.js:2229:23)
at setup (index.wue:132:1)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7246:29)
at setupComponent (runtime-core.esm-bundler.js:7201:11)
at mountComponent(runtime-core.esm-bundler.is:5524:13)
at processComponent (runtime-core.esm-bundler.is:5499:17)
at patch(runtime-core.esm-bundler.js:5101:21)
问题描述
代码如下
<template>
<div>
<!-- 其他模板内容... -->
</div>
</template>
<script>
import { defineComponent, reactive } from "vue";
import { useI18n } from "vue-i18n";
export default defineComponent({
setup() {
const { t } = useI18n();
const router = useRouter();
const mainColumns = [
{
title: t('applicationNo'),
dataIndex: "applicationNo",
},
// 其他列定义...
];
// 其他 setup 逻辑...
return {
mainColumns,
// 其他返回值...
};
},
});
</script>
解决方案:
在配置国际化的文件中加入legacy :false
,legacy是一个布尔值,用于指定是否使用旧版的i18n API。
import { createI18n ] from 'vue-i18n'
import zh from "./zh/index.js"
import en from "./en/index.hs"
const i18n=createI18n({
locale:"zh-CN",
legacy:false,
messages:{
"zh-CN":zh,
"en-CN":en
}
export default i18n