vue3.0 国际化 i18n

vue3.0 国际化 i18n的使用方法

原文链接：https://blog.csdn.net/j123450/article/details/111996152
问题
在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 

1
步骤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)

使用方式

//格式为 $t(‘变量’)

{{ $t('header_menu.logout') }}

我自己的补充：在html代码中的使用方式

{{ $t('header_menu.logout') }}

在vue3.0的js中的使用方式：
vue3.0已经不支持this指针的，所以使用方法有点不一样

//引入js部分引入
import {getCurrentInstance} from 'vue';
//在setup函数中实例化
const {proxy} = getCurrentInstance();
//在js中使用
proxy.$t('register.Setusername')

需要注意的是：如果你在数据初始化的时候使用
proxy.$t(‘register.Setusername’)的话，是会报错的。
如果你想要在初始化的时候使用多语言的话，可以在setup中先判断一下当前的语言环境，然后直接添加需要配置的内容；
例如：我想要在页面初始化的时候就显示【发送验证码】的中文或者英文。
就这样写

 setup(){
    const {proxy} = getCurrentInstance();
    const state = reactive(
        {       
        smsCodeMsg:"",
       }
    );
    //使用本地存储了语言
   if(localStorage.getItem('language')==='en'){
      state.smsCodeMsg="Send"
   } else {
     state.smsCodeMsg="发送验证码"
    }