Vue.js+Element-UI国际化实践

1、 下载element-ui和vue-i18n: 

npm i element-ui --save   

npm i vue-i18n –save

2、  创建languages文件夹

路径为/src/assets/languages，新建en.js和zh.js

const en = {
  "common": {
    "home": "Home",
    "archive": "Archive",
    "category": "Category",
    "search": "Search",
    "about": "About",
    "home-word-up": "Youth is a short-term dream, when you wake up, it has already disappeared",
    "home-word-down": "A small amount of evil was enough to offset all the noble qualities, making people's reputation a mess",
    "myname": "ArithmeticJia",
    "blog-name": "ArithmeticJia's Blog",
    "lang": "language",
    "lang-zh": "Chinese",
    "lang-en": "English",
    "autograph-left": "rain hard",
    "autograph-middle": "house",
    "autograph-right": "vegetation",
    "search-placeholder": "search",
    "cat-before": "Total",
    "cat-after": "categories",
    "load-text": "loading...",
    "timeout": "request timeout",
    "know": "got it",
    "tip": "click to refresh",
    "table" : {
      "post-id": "id",
      "post-title": "title",
      "post-category": "category",
      "post-tags": "tags",
      "post-visit": "visit",
      "post-author": "author",
      "post-time": "release time",
      "post-operation": "operation",
      "operation": {
        "overview": "overview",
        "detail": "detail",
        "confirm": "ok"
      }
    }
  }
};
export default en

var zh = {
  "common": {
    "home": "首页",
    "archive": "归档",
    "category": "分类",
    "search": "搜索",
    "about": "关于",
    "home-word-up": "青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪",
    "home-word-down": "少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉",
    "myname": "请叫我算术嘉",
    "blog-name": "请叫我算术嘉の博客",
    "lang": "语言",
    "lang-zh": "中文",
    "lang-en": "英文",
    "autograph-left": "雨纷纷",
    "autograph-middle": "旧故里",
    "autograph-right": "草木深",
    "search-placeholder": "搜索",
    "cat-before": "当前共计",
    "cat-after": "个分类",
    "load-text": "拼命加载中...",
    "timeout": "request timeout",
    "know": "我知道了",
    "tip": "点击刷新页面",
    "table" : {
      "post-id": "编号",
      "post-title": "标题",
      "post-category": "分类",
      "post-tags": "标签",
      "post-visit": "浏览量",
      "post-author": "作者",
      "post-time": "发布时间",
      "post-operation": "操作",
      "operation": {
        "overview": "概览",
        "detail": "详情",
        "confirm": "确定"
      }
    }
  }
}
export default zh

3、 创建一个i18n文件夹

和languages目录平级就行，在i18文件夹中创建文件index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import langZh from "@/assets/languages/zh.js"
import langEN from "@/assets/languages/en.js"


Vue.use(VueI18n)

const i18n = new VueI18n({

  locale: 'zh',
  messages: {
    'zh': {...langZh,...zhLocale},
    'en': {...langEN,...enLocale}
  }
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

4、使用

有三种情况

<span style="font-size: large">{{$t('common.home-word-up')}}</span>

:element-loading-text="$t('common.load-text')"

open(title,body) {
    this.$alert(body.substr(1,100)+'...', title, {
        confirmButtonText: this.$t('common.table.operation.confirm'),
    });
},