Vue-i18n使用（适合萌新）

i18n的简单应用

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需作大的改变就可以适应不一样的语言和地区的须要。对程序来讲，在不修改内部代码的状况下，能根据不一样语言及地区显示相应的界面。 在全球化的时代，国际化尤其重要，由于产品的潜在用户可能来自世界的各个角落。一般与i18n相关的还有L10n（“本地化”的简称）

很少说了直接走起

需求：

公司项目须要国际化，点击按钮切换中文/英文

咱们首先要进行安装：

npm install vue-i18n --save
复制代码

以后咱们要在咱们的main.js内引入

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 经过插件的形式挂载
const i18n = new VueI18n({
  locale: 'zh',    // 语言标识
  //this.$i18n.locale // 经过切换 locale 的值来实现语言切换
  messages: {
    'zh': require('@/locale/zh.js'),   // 中文语言包
    'en': require('@/locale/en.js')    // 英文语言包
  }
})
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})
复制代码

其中

messages: {
    'zh': require('@/locale/zh.js'),   // 中文语言包
    'en': require('@/locale/en.js')    // 英文语言包
  }
复制代码

咱们message内部引用的语言包要根据咱们自身的需求去进行更改，有的多是双语言需求有的多是多语言,请根据自身进行调整。 (相似双token/header)

这是我放语言包的地址和文件(看截图就能看懂)

这是en的
module.exports = {
    language: {
        name: 'English',
    }
}
这是zh的
module.exports = {
    language: {
        name: '中文',
    }
}
复制代码

有的人可能用过i18认为我可能写的过于简单了,其实不是内容就是一个格式的表。咱们要根据本身的需求去写，因此在这里我就不给一些18'萌新'留下一些先入为主的观念了.总用的谅解下哈~

以后咱们就能够在页面当中去写功能了-->首先咱们转换文字确定是经过咱们触发的某个功能才会发生改变.因此咱们要触发咱们的某个事件这里咱们就用点击事件代替了

<p v-on:click="changeL" >
	Language: CN/EN
</p>
或
<p @click="changeL" >
	Language: CN/EN
</p>
简单来讲@就是v-on的缩写，还有就是：是v-bind的缩写
复制代码

触发事件

changeL(){
		if ( this.lang === 'zh' ) {
			this.lang = 'en';
			this.$i18n.locale = this.lang; // 关键语句
		}else {
			this.lang = 'zh';
			this.$i18n.locale = this.lang; // 关键语句
		}
	}
复制代码

以后改变咱们页面的内容

内容格式：

我的以为统一一点用这种就好
{{ $t('language.name') }}
复制代码

若是须要深度一些的i18n请关注我稍后的更新谢谢.