Vue3引入i18n国际化组件

1. 引入

npm install vue-i18n

2. 项目中导入i18n

lang index.js

//语言
import { createI18n } from 'vue-i18n'		//引入vue-i18n组件
import zh from './zh'						//引入中文语言包
import en from './en'						//引入英文语言包
// import { 引入的组件 export 出来的 变量} from 'vue-i18n'
//注册i8n实例并引入语言文件
const i18n = createI18n({
    locale: 'en',		//默认显示的语言
    messages: {
        zh: zh,
        en: en
    }
})
export default i18n; //将i18n暴露出去，在main.js中引入挂载

en.js

export default {
    header: {
        home: 'Home',
    }
}

zh.js

export default {
    header: {
        home: '主页',
    }
}

main.js

import { createApp } from 'vue'
import router from './router'
import store from './utils/store'
import i18n from './lang'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(store)
app.use(router)
app.use(i18n)
app.mount('#app')

使用：

{{$t('header.home')}}