vue-i18n vue-cli项目中实现国际化多语言切换功能一

vue-cli项目中引入vue-i18n

安装：

npm install vue-i18n可参考vue-i18n官网文档

main.js中引入：

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

配置语言包（main.js）:

const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文语言包
    'en-US': require('./common/lang/en') // 英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, // 加入
  router,
  store,
  components: { App },
  template: '<App/>'
})

语言相关包（zh.js、en.js）:

zh.js:

export const lang = {
  menu: [
    {name: '首页', path: ''},
    {name: '企业简介', path: ''},
    {name: '企业舆情', path: ''},
    {name: '标签管理', path: ''},
    {name: '采集管理', path: ''},
    {name: '关于我们', path: ''},
    {name: '哈哈哈哈', path: ''}
  ],
  login: '登录',
  register: '注册',
  welcome: '欢迎',
  logout: '退出'
}

en.js:

扫描二维码关注公众号，回复： 3771883 查看本文章

export const lang = {
  menu: [
    {name: 'HomePage', path: ''},
    {name: 'BusinessIntro', path: ''},
    {name: 'BusinessInfo', path: ''},
    {name: 'TagManage', path: ''},
    {name: 'CollectManage', path: ''},
    {name: 'AboutUs', path: ''},
    {name: 'hahahaha', path: ''}
  ],
  login: 'login',
  register: 'register',
  welcome: 'welcome',
  logout: 'logout'
}

语言切换：

this.$i18n.locale = 'en-US'// 切换成英文
this.$i18n.locale = 'zh-CN'// 切换成中文

使用（同于vue中对于文字数据的渲染，有以“{{ }}”或v-text、v-html等的形式，同样的使用语言国际化（vue-i18n）后，依旧可以沿用）：

<el-menu-item
      v-for="(item,index) in $t('lang.menu')"
      :key="index"
      :index="item.path"
      :route="item.path">{{ item.name }}</el-menu-item>
<router-link
      class="eff"
      to="/login">{{ $t('lang.login') }}</router-link>
<router-link to="/register">{{ $t('lang.register') }}</router-link>

eg:

v-text:

{{ }}:

<span>{{ $t(‘lang.welcome’) }}</span>

以上为基本用法，进阶用法高级用法见后续相关文章，这里主要是不让大家一下接触太多而混淆

原创，转载请注明出处微笑空间站

vue-i18n vue-cli项目中实现国际化 多语言切换功能 一

猜你喜欢

vue-i18n vue-cli项目中实现国际化多语言切换功能一