[vue问题]Uncaught SyntaxError: Not available in legacy mode

问题描述

Uncaught SyntaxError: Not available in legacy mode
    at Object.createCompileError (message-compiler.cjs.js?af13:58:1)
    at createI18nError (vue-i18n.cjs.js?fbeb:79:1)
    at useI18n (vue-i18n.cjs.js?fbeb:1783:1)
    at setup (index.ts?2cc2:29:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:7109:1)
    at setupComponent (runtime-core.esm-bundler.js?d2dd:7064:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:4951:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:4926:1)
    at patch (runtime-core.esm-bundler.js?d2dd:4518:1)

是在一众包升级的过程中报的错误，发现错误和vue-i18n相关

问题分析

在官网更新日志查看后发现，vue-i8n的8.x版本，一般支持vue2.x，也支持vue3.x
但是vue-i8n的v9.x版本主要是支持vue3.x版本

Vue 3 允许您混合使用 Options API 模式和 Composition API模式，Options API 模式也即Legacy mode, 但自 v9 初始版本以来，Vue i18n 不允许混合使用 API 模式，因此您需要根据你的vue3采用的模式来确定Vue i18n 使用哪个模式

解决方案

直接回退vue-i18n的版本

版本回退就不存在该问题，但是之后的开发总是要使用最新版本的所以不推荐该方案

当然如果当前项目只是维护阶段就无所谓了

解决错误提示的问题

升级后vue-i18n版本信息

"vue-i18n": "^9.2.2"

从错误提示我们可以明确是因为Legacy模式不可用
因为我的vue的代码使用的是Composition API风格代码， 因此需要设置vue-i8n为Composition API模式

const i18n = createI18n({
  allowComposition: true,
  locale: getLocale(),
  messages,
  silentFallbackWarn: true,
  silentTranslationWarn: true //去除警告信息
});

问题解决，亲测两种方案均可