[vue问题]Uncaught SyntaxError: Not available in legacy mode
- 问题描述
- 问题分析
- 解决方案
- 直接回退vue-i18n的版本
- 解决错误提示的问题
问题描述
Uncaught SyntaxError: Not available in legacy modeat 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 //去除警告信息
});
问题解决，亲测两种方案均可
