0
点赞
收藏
分享

微信扫一扫

vue2 elment + vue-i18n 实现多语言 的问题,注意vue2是使用的8.27,而最新的版本是大于这个的,vue3支持的

杨小羊_ba17 2022-04-14 阅读 16

问题描述:

在vue使用 vue-i18n 的时候发现支付直接安装 npm i vue-i18n 的时候报错,因为他默认安装的是最新的版本,所有适合vue3不适合vue2的项目。

解决:

第一步:

npm i vue-i18n@8.27.0 -D

第二步:引入vue-i8n和语言包,在工程下新建文件放入如下代码:

第三步:在vue项目目录下的main.js里面挂载

import i18n from '@/lang'
 
//注册elementUI的组件,并设置element为当前的语言
Vue.use(ElementUI, {
   i18n: (key, value) => i18n.t(key, value)  //当切换 locale 的时候,t()函数会根据传入的key值去locale指定的语言包中找响应的值
  }
})
 
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

 第四步:en.js文件里面配置英文

export default {
  route: {
    dashboard: 'Dashboard',
    manage: 'manage',
    users: 'users',
    menus: 'menus'}
    }

第五步:zh.js文件里面配置中文

//zh.js 语言包中导出的语言包内容
export default {
  route: {
    dashboard: '首页',
    manage: '后台管理',
    users: '用户管理',
    menus: '菜单管理',
    logs: '日志管理',
    example: '示例',
    table: '数据列表'
	}
}

第六步:设置切换语言

 methods: {
    changeLanguage(type) {
      //    设置的类型  先写入到cookie
      Cookie.set('language', type) // 写入cookie缓存
      // 改变当前的多语言
      this.$i18n.locale = type // 将当前的多语言类型改成对应的类型
      this.$message.success('切换多语言成功')
    }
  }

整个流程完了。感觉新手小白还是不好理解。这边参考的这个文章完善的:vue2/element项目多语言(插件i8n) - Fen~ - 博客园

举报

相关推荐

0 条评论