【VUE】vue-i18n: Uncaught SyntaxError: Not available in legacy mode

环境

• vue ^3.3.4
• vue-i18n ^9.2.2
• vite ^4.4.7

问题

在vite脚手架项目当中，使用vue-i18n插件进行国际化多语言时，
报错：Uncaught SyntaxError: Not available in legacy mode

对于这个报错信息，网上大部分的处理方案是：

const i18n = createI18n({
  // legacy设为false
  // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
  legacy: false,
  locale: 'zh',
  messages: {
    zh,
    en
  }
})

export default i18n

但是上面的做法会导致Vue选项式写法时this没有了$i18n的挂载

解决方法

方法一：

const i18n = createI18n({
  // ...
  legacy: true, // 设为true或者不设置
  allowComposition: true,
  // ...
})

方案来源于官方手册《Migration in Vue 3》

通过上诉配置，可实现选项式、组合式混合使用

方法二：

例如，上诉代码所在src/locales/index.js文件里，那么可以在同文件里添加一个t方法并导出

const i18n = createI18n({
  legacy: true, // 设为true或者不设置
  locale: 'zh',
  messages: {
    zh,
    en
  }
})

// 新增
export function t(key, args) {
  if (!i18n)return key;
  return i18n.global.tc(key, args)
}

export default i18n

在组合式组件里使用方式(选项式里照旧this.$t(...))：

<script setup>
import { t } from "@/locales";

t('home')
</script>

---

另外有一篇文献，也可以参考下：
《Vue3+Vite2+ElementPlus+i18n更新后配置错误》