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请关注我稍后的更新谢谢.