首先 创建i18n文件
/lang/index.ts
import { createI18n } from "vue-i18n";
import cn from '@/lang/cn'
import en from '@/lang/en'
const i18n = createI18n({
locale: 'en',
globalInjection: true,
messages: {
en: en,
cn: cn
}
})
export default i18n
然后 在main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import i18n from "@/lang/index"
const app = createApp(App);
app.use(i18n);
app.mount('#app')
在vue模板中使用
<template>
<a-button type="primary">
{{ $t('return') }}
</a-button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from 'vue-i18n'
export default defineComponent({
name: 'Forget',
setup() {
const i18n = useI18n()
const tips = i18n.t('return')
}
})
</script>
在外部的ts文件中使用
import i18n from "@/lang/index"
const tips = i18n.global.t('return')
