前端架构之i18n国际化

安装

npm i vue-i18n -S

创建i18n管理目录

i18n.js

引入vue-i18n并注册到vue上

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './langs'

Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: localStorage.lang || 'en',
    messages
})
export default i18n

langs/index.js

import cn from './cn'
import en from './en'
export default {
  cn,
  en
}

langs/cn.js

const cn = {
    message: {
        'hello': '你好，世界',
    },
}
export default cn

langs/en.js

const en = {
    message: {
        'hello': 'hello, world',
    },
}

export default en

main.js

== 全局注册 在main.js 中==

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

使用实例

到这里为止，vue+i18n的基本环境已经安装和配置完成，那么接下来我们就开始做一个使用实例。
模板中使用

<template>
  <div class="hello">
  	<!-- vue模板中调用：title和直接在p元素中插值 -->
    <p :title="$t('message.hello')">{{$t('message.hello')}}</p>
    <!--vue钩子函数中调用赋值： -->
    <h5>{{msg}}</h5>
  </div>
</template>

<script>
export default {
	name: 'HelloWorld',
 	data () {
    	return {
    		msg: ''
    	}
 	},
	created(){
		this.msg = this.$t('message.hello');
	},
}
</script>

js文件中使用

import i18n from 'i18n/i18n'
const msg = i18n.t('message.hello')

element-ui国际化

element-ui国际化配置涉及到的文件有：i18n.js、cn.js、en.js

// i18n.js 在原有基础添加以下两行代码
import locale from 'element-ui/lib/locale'
locale.i18n((key, value) => i18n.t(key, value)) // 重点：为了实现element插件的多语言切换

// en.js 
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
    message: {
        'hello': 'hello, world',
    },
    ...enLocale
}

export default en

怎么知道有没有配置成功，那就直接上实例看效果

// HelloWorld.vue
<template>
  <div class="hello">
    <el-date-picker
      v-model="value3"
      type="date"
      placeholder="选择年">
    </el-date-picker>
  </div>
</template>

<script>
export default {
	name: 'HelloWorld',
 	data () {
    	return {
    		value3: ''
    	}
 	},
	created(){
		// 切换英文
		this.$i18n.locale = 'en'; // "cn" or "en"
	},
}
</script>

查看官网教程