1、首先在自己的项目中安装 vue-i18n依赖包。这里使用NPM进行安装,如果没有科学上网请使用CNPM进行安装。
npm install vue-i18n --save-dev
2、将i18n引入vue实例中,在项目中实现调用API和模板语法。现在在main.js中引入 vue-i18n
import VueI18n from 'vue-i18n' //引入vue-i18n
Vue.use(VueI18n); //通过插件的形式挂载
/*---------基本使用-----------*/
const i18n = new VueI18n({
locale: 'CN', // 语言标识
messages : {
en: {
message: {
hello: 'hello world'
}
},
cn: {
message: {
hello: '你好、世界'
}
}
}
})
/*---------使用语言包-----------*/
const i18n = new VueI18n({
locale: 'zh', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh': require('./common/lang/zh'), // 中文语言包
'en': require('./common/lang/en') // 英文语言包
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
i18n, //挂载到实例,一定得在这个位置,而不是comonents中
template: '<App/>',
components: {
App
}
});
上面的代码正式将 vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象,方便全局调用。我们通过 this.$i18n.locale 来进行语言的切换。
3、接下来我们就需要新建两个js文件(或者josn文件)作为语言包。
其中en.js语言包中代码为:
module.exports = {
message