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:

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>

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

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