vue中国际化（vue-i18n）

在vue中进行国际化的中英文切换：（vue-i18n）

vue-i18n 仓库地址 http://github.com/kazupon/vue-i18n

vue-i18n 的兼容性：支持 vue.js 2.x 以上版本

 

vue-i18n的使用：

安装 ： npm install vue-i18n --save

使用 ： 1、在main.js引入vue-i18n

import I18n from 'vue-i18n'

Vue.use(I18n)

2、准备在本地的翻译信息

const messages = {

zh: {

message: {

hello: '你好！'

}

},

en: {

message: {

hello: 'hello!'

}

}

}

3、创建i18n的实例：

const i18n = new I18n({

locale: 'en', // 语言标识

messages:

})

4、将i18n的实例挂载到vue根实例上

new Vue({

el: '#app',

i18n,

router,

components: {

App

},

template: '<App/>'

})

5、在template中使用

{{ $t(message.hello) }}

6、在浏览器中的显示

                                                     

7、在实际开发中肯定会有很多这样的语言信息，应该保存到不同的json对象文件中，zh.js 和 en.js 文件

将步骤2中的代码分别放到zh.js 和 en.js 文件中 ：

zh.js export default{

message: {

hello: '你好！'

}

}

en.js export default{

message: {

hello: 'Hello!',

}

}

在main.js中import的方法进行文件的引入 然后就可以进网页的i18n的切换。