一、Vue+element-ui+i18n 多语言化--实际项目

第一步 npm/yarn 下载Vue-i18n

如果项目中没有js-cookie则同样下载

 yarn add vue-i18n
 npm i vue-i18n -save

第二步在src文件夹下新建一个language文件夹，内部新建四个文件。

分别为：index.js/lang.js/en.json/zh.json。如图

image

第三步，在en.json和zh.json两个文件中写入即将需要的中英文对照翻译。

如：

en.js

  {
    "main": {
      "hello": "Hello"
    },
    "router": {
      "maybe": "Maybe"
    }
}

zh.js

  {
    "main": {
      "hello": "你好"
    },
    "router": {
      "maybe": "也许"
    }
}

第四步，在index.js 和lang.js中

lang.js

export default {
  setLang (lang) {
     window.localStorage.setItem('user_lang', lang)
  },
  getLang (defaultLang) {
    const localLang = window.localStorage.getItem('user_lang')
    if (localLang === null) {
      return defaultLang
    } else {
      return localLang
      }
  }
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import LangStorage from './lang'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'
const locales = {
  zh: Object.assign(require('./zh.json'), zhLocale),
  en: Object.assign(require('./en.json'), enLocale)
}
const i18n = new VueI18n({
  locale: LangStorage.getLang('zh'),
  messages: locales
})
export const setup = lang => {
if (lang === undefined) {
  lang = window.localStorage.getItem(LOCALE_KEY)
  if (locales[lang] === undefined) {
    lang = DEFAULT_LANG
  }
}
console.log(lang)
window.localStorage.setItem(LOCALE_KEY, lang)
Object.keys(locales).forEach(lang => {
  document.body.classList.remove(`lang-${lang}`)
 })
document.body.classList.add(`lang-${lang}`)
document.body.setAttribute('lang', lang)
Vue.config.lang = lang
i18n.locale = lang
}
window.i18n = i18n
export default i18n

第五步，在main.js中

在main.js这引入i18n ，但需要将其放置于最上，如

import i18n from './language'
import Vue from 'vue'

然后 element-UI多语言化

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

将i18n注入到

var globalVm = new Vue({
  el: '#app',
  i18n, // 不可少
  router,
  store,
  template: '<App/>',
  components: {
    App
  }
})

第六步，在首页头部添加button，绑定事件，切换语言。

<el-button @click="changeLanguage"><p>{{$t("main.language")}}</p>  </el-button>

changeLanguage () {
  // console.log(this.$i18n.locale)
  if (this.$i18n.locale === 'en') {
    setup('zh')
  } else {
    setup('en')
  }
  LangStorage.setLang(this.$i18n.locale)
}

好了，到此功能实现。下面就是添加变量了。在html中有两种方式，如

<-- 括号内单双引号皆可 -->
<span slot="title">{{ $t("main.hello"}}</span>

标签内的

<MenuGroup :title="$t('manage.province')">
<el-inpu :placeholder="$t('user.enterInformation')"></el-input>

script标签内 js部分中可以用this.$i18n.t('a.b')
然而在添加变量中仍然遇到不少的麻烦。

在data return 中很难添加变量。但是如果是在data return中写了render，则可以用单大括号来写如

title: '操作', // 没有好的办法
      key: 'action',
      align: 'center',
render: (h, params) =>
        <div>
          {this.isShow ? <div>
            {this.$store.getters.getUserRole.includes(this.base.key + '.u')
              ? <el-button type="primary" size="mini"
                onClick={() => { this.editItem(params.row) }}>{this.$i18n.t('main.reviseInformation')}</el-button>
              : ''}
            {
            }
          </div> : '禁止操作'}
        </div>

在.js文件中不能直接写。但是可以写成如下形式
在.js文件中

title123: 'main.hello'

在引用这个.js文件内容的html代码中

<div :title="$t(title123)"></div>

ok,以上就是整个项目多语言化时的步骤和遇到的问题。如果有其他问题，欢迎询问。

全部频道