1.依赖的版本

{
"vue": "^3.2.45",
"vue-i18n": "^9.2.2",
}

2.定义i18n

// locale.ts

const i18n = createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: getLang() || 'zh',
  fallbackLocale: 'zh', // set fallback locale
  globalInjection: true,
  messages: {
    zh: { ...zhMessages },
    en: { ...enMessages }
  }
})

export default i18n

3.安装插件

// main.ts

import i18n from '@/locale'
const app = createApp(App)
app.use(i18n)
app.mount('#app')

4.在vue文件内使用i18n

直接在html里用$t来访问i18n messages里的内容

<!-- login.vue -->

<div class="text">{{ $t('login.error2') }}</div>

5.在ts文件内使用i18n

// api.ts

import i18n from '@/locale'
import { ElNotification } from 'element-plus'

ElNotification.error({
  title: i18n.global.t('login.error4'),
  message: response.errmsg,
  duration: 10000
})