请选择 进入手机版 | 继续访问电脑版

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

[复制链接]
八步半的房间 发表于 2021-1-2 19:00:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
引言

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

在vue3.0 中使引用 i18n 时一直报错原因:
请查抄版本问题!请查抄版本问题!请查抄版本问题!现在我使用的"vue-i18n": “^9.0.0-beta.17”,版本开始兼容vue3.0。
  1. //安装最新的版本 @nextnpm install vue-i18n@next
复制代码
官网引用为 vue2.0版本的引用方式和挂载方式,因vue3.0 的 vue 导入方式为 import { createApp } from “vue”; 无法按传统直接挂载。
vue3.0中使用i18n纪录


步调1:安装vue-i18n
  1. npm install vue-i18n@next
复制代码
步调2:创建language文件夹存放各版本语言变量
language 中 index.js
  1. //语言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
  1. module.exports = {    // 头部菜单    header_menu: {        logout: '退出'     }}
复制代码
language 中 en.js
  1. module.exports = {    // 头部菜单    header_menu: {        logout: 'sign out'     }}
复制代码
main.js中挂载
  1. 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");
复制代码
使用方式
  1. //格式为 $t('变量'){{ $t('header_menu.logout') }}
复制代码
来源:https://blog.csdn.net/j123450/article/details/111996152
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )