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

问题

在vue3.0 中使引用 i18n 时一直报错原因：版本问题，“vue-i18n”: “^9.0.0-beta.17”,版本开始兼容vue3.0。

//vue2.0时只需要安装vue-i18n，3.0之后vue-i18n@next 
//安装最新的版本 @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:**创建lang文件夹存放各版本语言变量
lang 中 index.ts

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

lang 中 ch.ts

export default {
  login: {
    title: '系统登录',
    logIn: '登录',
    username: '账号',
    password: '密码',
    any: '随便填',
    thirdparty: '第三方登录',
  },
}

lang 中 en.ts

export default {
  login: {
    title: 'Login Form',
    logIn: 'Login',
    username: 'Username',
    password: 'Password',
    any: 'any',
    thirdparty: 'Or connect with',
  },
}

main.ts中挂载

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueI18n from './language'

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

使用方式

//格式为 $t('变量')
{{ $t('login.title') }}