Vue3类式组件中使用vue-i18n报错求助（Vue2迁移场景）

1. Vue3中能否使用vue-i18n？ #

完全可以。你当前使用的vue-i18n@^9.5.0正是官方为Vue3适配的版本，它优先支持Composition API，同时也兼容Options API写法，能满足Vue3项目的国际化需求。

2. 类式组件是否支持setup函数？ #

支持。你使用的vue-class-component@^8.0.0-0是适配Vue3的版本，已经支持在类式组件中使用setup函数，也可以结合vue-property-decorator提供的@Setup装饰器来编写Composition API逻辑。

3. 如何解决当前报错？ #

报错Uncaught SyntaxError: Must be called at the top of a setup function的原因是useI18n()属于Composition API钩子函数，必须在setup函数的顶层作用域内调用，不能直接在@Component的选项中执行。提供三种可行的解决方法：

方法一：在类组件的setup方法中调用useI18n #

在类内部定义setup方法，在其中调用useI18n并返回所需的国际化方法/属性，这些返回值会自动挂载到类实例上，可通过this访问：

import { Component, Vue } from 'vue-class-component';
import { useI18n } from 'vue-i18n';

@Component
export default class MyComponent extends Vue {
  setup() {
    // 必须在setup顶层调用useI18n
    const { t, locale } = useI18n();
    return { t, locale };
  }

  // 组件方法中可直接使用
  handleClick() {
    console.log(this.t('common.hello'));
  }
}

方法二：使用Options API风格的全局挂载（无需调用useI18n） #

如果更倾向于Vue2时代的用法，可以在项目入口全局注册vue-i18n，之后直接通过this.$t在类组件中使用，无需调用useI18n：

// main.js/main.ts
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

// 初始化i18n实例
const i18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': {
      common: {
        hello: '你好'
      }
    },
    'en-US': {
      common: {
        hello: 'Hello'
      }
    }
  }
});

const app = createApp(App);
app.use(i18n); // 全局注册
app.mount('#app');

然后在类组件中直接使用：

import { Component, Vue } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  mounted() {
    console.log(this.$t('common.hello'));
  }
}

方法三：使用@Setup装饰器（基于vue-property-decorator） #

如果你习惯用装饰器写法，可以通过vue-property-decorator提供的@Setup装饰器来封装国际化逻辑：

import { Component, Vue, Setup } from 'vue-property-decorator';
import { useI18n } from 'vue-i18n';

@Component
export default class MyComponent extends Vue {
  @Setup()
  initI18n() {
    const { t, locale } = useI18n();
    return { t, locale };
  }

  someMethod() {
    console.log(this.t('common.hello'));
  }
}

内容的提问来源于stack exchange，提问作者Thunderbird