Uncaught (in promise) SyntaxError: Not available in legacy mode

项目场景：

在项目中对表格标题进行国际化时报错，奇怪的是表单国际化没问题，表格国际化报错。
报错信息如下：

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