如何在类样式组件中使用vue-i18n(vue3)

Question

我正在尝试将 vue2 迁移到 vue3，即“类样式组件”。

它使用的是vue-i18n。我可以在Vue3中使用vue-i18n吗？

package.json

  "dependencies": {

    "vue": "^3.3.4",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.5.0",
    "vue-property-decorator": "^10.0.0-rc.3",

我在浏览器控制台中遇到以下错误。

Uncaught SyntaxError: Must be called at the top of a `setup` function
    at createCompileError (message-compiler.esm-browser.js:99:19)
    at createI18nError (vue-i18n.mjs:101:12)
    at useI18n (vue-i18n.mjs:2294:15)
    at TestXXXXXX.vue:20:9

它说“必须在

setup

函数的顶部调用”。 可以在类样式组件中使用“设置功能”吗？

以下是我的代码示例。

<script lang="ts">

import { useI18n } from 'vue-i18n';

@Component({
  i18n: useI18n()
})
export default class TestXXXXXX extends Vue {
:

有人可以帮助我吗？ 预先感谢。

Answer 1

尽管我有评论，仍然可以将 vue-i18n 与 vue-class-component 一起使用。这是如何做到的。

首先，您需要创建

app

并安装

vue-i18n

：

在您的

main.ts

或您的应用程序的任何条目中：

import { createApp } from "vue";
import App from "./App.vue";
import { createI18n } from "vue-i18n";

const i18n = createI18n({
  locale: "en",
  legacy: false,
  messages: { // add your messages here
    en: {
      common: {
        message: "Hello world!",
      },
    },
  },
});

createApp(App).use(i18n).mount("#app");

现在您可以在项目中使用

$t

和

useI18n

，具体操作方法如下：

在你的

App.vue

：

<template>
  <HelloWorld msg="common.message"/> <!-- The traduction key -->
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';

@Options({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

现在在组件中

HelloWorld.vue

这是使用它的两种方法：

<template>
  <div>
    <h1>{{ $t(msg) }}</h1>
    <h2>{{ i18n.t('common.message') }}</h2>
  </div>
</template>

<script lang="ts">
import { Options, Vue, setup } from 'vue-class-component';
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string

  msgI18nSetup = ref('')
  

  i18n = setup(() => {
    return useI18n()
  })
}
</script>

我强烈不建议您使用

vue-class-component

，而是更多地使用composition API与

Vue3

和

Typescript

。

不过希望对你有帮助:)