vue项目 支持多语言(vue-i18n)

1.安装 vue-i18n, 推荐 npm 包依赖

$ npm install vue-i18n

2.注入 vue 实例中，项目中实现调用 api 和 模板语法

main.js 中引入 vue-i18n:

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)  // 通过插件的形式挂载

const i18n = new VueI18n({

    locale: 'zh-CN',    // 语言标识

    //this.$i18n.locale // 通过切换locale的值来实现语言切换

    messages: {

        'zh-CN': require('./common/zh'),   // 中文语言包

        'en-US': require('./common/en')    // 英文语言包

    }

})

newVue({ 

 el:'#app',

 i18n,    // 不要忘记

 template:'', 

 components: { App }

})

上面的代码正式将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象，方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换。

3.简单的是中英文切换，那么自然我们需要中英文两套语言的文件，vue-i18n中相对简单，只需要两个 js 文件，通过 require 的形式引入到 main.js

4.组件中如何去切换 locale 的值，实现语言切换。

main.vue

这边的重点就是，点出的‘’关键语句‘’：this.$i18n.locale,当你赋值为‘zh-CN’时，导航栏就变成中文；当赋值为 ‘en-US’时，就变成英文。效果图就是文章前面的样子。

5.vue-i18n 数据渲染的模板语法

我们知道 vue 中对于文字数据的渲染，有以‘’{{}}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。

v-text:

{{}}:

{{$t('m.music')}}

例: