vue3.0中i18n国际化插件的使用

引言

记录在学习vue3.0是添加i18n国际化翻译功能以及遇到的问题。

问题

在vue3.0 中使引用 i18n 时一直报错原因：
请检查版本问题！请检查版本问题！请检查版本问题！目前我使用的"vue-i18n": “^9.0.0-beta.17”,版本开始兼容vue3.0。

//安装最新的版本 @next
npm install vue-i18n@next 

官网引用为 vue2.0版本的引用方式和挂载方式，因vue3.0 的 vue 导入方式为 import { createApp } from “vue”; 无法按传统直接挂载。

vue3.0中使用i18n记录

步骤1:安装vue-i18n

npm install vue-i18n@next 

步骤2:创建language文件夹存放各版本语言变量
language 中 index.js

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

language 中 ch.js

module.exports = {
     
    // 头部菜单
    header_menu: {
     
        logout: '退出' 
    }
}

language 中 en.js

module.exports = {
     
    // 头部菜单
    header_menu: {
     
        logout: 'sign out' 
    }
}

main.js中挂载

import {
      createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import VueI18n from './language'

createApp(App)
  .use(store)
  .use(router)
  .use(Antd)
  .use(VueI18n)
  .mount("#app");

使用方式

//格式为 $t('变量')
{
     {
      $t('header_menu.logout') }}