标签：插件 vue menu js vue3.0 logout i18n import

转载自：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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。