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

转载自：https://blog.csdn.net/j123450/article/details/111996152
后续为自行补充

引言

记录在学习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: '退出' 
    }
}

age 中 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('header_menu.logout') }}

• data域

data(){
    return {
      message:this.$t('header_menu.logout')
    }
  },

进阶

目前尚未找到在setup方法中正确引用i18n组件的方法

标签：插件,vue,menu,js,vue3.0,logout,i18n,import
来源： https://www.cnblogs.com/caozhenfei/p/14444775.html