vue国际化语言

国际化语言
1：在main.js里面导入库

import ElementUI from 'element-ui'
import i18n from './i18n/i18n'

1.1在main.js将库暴露出来

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

安装语言库：

npm install --save vue-i18n

（这个i18n是自己已经封装好的文件，直接导入进来，并暴露出去使用）
将i18n文件夹复制过来（已经封装好的）

3：i18n.js文件内容

import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: localStorage.lang || 'cn',
  messages
})
locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换
export default i18n

4：i18n/lang/index.js内容

import en from './en'   //英文
import cn from './cn'   //简体中文
import tw from './tw'   //繁体中文
import vi from './vi'   //越南语
import ja from './ja'   //日语
import ko from './ko'   //韩语

export default {
  en,
  cn,
	tw,
	vi,
	ja,
	ko
}

5：cn.js里面是要切换的中文名称

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
const cn = {
	// 公共
	//系统语言
	systemLang: {
		cn: '普通话',
		tw: '繁体',
		en: '英语',
		ko: '韩语',
		ja: '日语',
		vi: '越南语'
	},
	header: {
		meet_room: '专属会议室',
		meet_manager: '会议管理',
		exit_login: '退出'
	},
	...zhLocale
}
export default cn

对应的en.js

import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
	systemLang: {
		cn: 'cn',
		tw: 'tw',
		en: 'English',
		ko: '한국어.',
		ja: 'ja',
		vi: 'vi'
	},
  header: {
  	meet_room: 'meet_room',
  	meet_manager: 'meet_manager',
  	exit_login: 'exit'
  },
	...enLocale
}

export default en

都对应这样的翻译，格式一样，本地国际化
6：开始demo引用，效果图如下

所有的标签命名都在cn.js里面去命名，并拿出来使用，例如英语：systemLang.en
使用就用$t+标签名

  <button @click="ppppppp">{{$t('systemLang.cn')}}</button>
   <button @click="qqqqqqqq">{{$t('systemLang.en')}}</button>
   <div>{{$t('input_placeholder.username')}}</div>
      ppppppp(){
         this.$i18n.locale = "cn";//切换语言的方法
      },
      qqqqqqqq(){
         this.$i18n.locale = "en";
      }
//更改系统语言：this.$i18n.locale = this.msysLang;//语言
//如果是在js里面写这个表达式就是：this.$i18n.t（）
this.$i18n.t('header.languageSet')
//vue-i18n进行多语言切换?input标签里面placeholder属性，属性前面一定要加冒号
:placeholder="$t('languageInstructions.inputText')"//记住冒号是关键