vue 多语言

1.安装命令：cnpm install vue-i18n --save

2.目录结构：

3.tools文件夹中新建i18n.js文件,文件内容

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

 

// 以下为语言包单独设置的场景，单独设置时语言包需单独引入

const messages = {

'zh_CN': require('../assets/conf/lang/zh'), // 中文语言包

'en_US': require('../assets/conf/lang/en') // 英文语言包

}

// 最后 export default，这一步肯定要写的。

export default new VueI18n({

locale : 'zh_CN', // set locale 默认显示中文

messages : messages // set locale messages

})

3. 在main.js里面全局引入并挂载

import Vue from 'vue'

import App from './App'

import router from './router'

import i18n from './tools/i18n'

Vue.config.productionTip = false

 

new Vue({

el: '#app',

i18n,     //挂载i18n

router,

components: { App },

template: '<App/>'

})

4. zh.js及 en.js 内容

module.exports = {

login:{

'title' : '软件系统',

'username' : '请输入用户名',

'password' : '请输入密码',

'login' : '登录',

'language' : '请选择语言'

},

}

 

 

 

module.exports = {

login:{

'title' : 'Software system',

'username' : 'Please enter the user name',

'password' : 'Please enter your password',

'login' : 'Login',

'language' : 'Please select language'

},

}

 

 

 

最后在页面中使用

html 部分

<h3>{{$t("login.title")}}</h3>

<button @click='langToggle()'>en/中</button>

 

js 部分

langToggle(){

if(this.$i18n.locale == 'en_US'){

console.log(this.$i18n.locale,"1111111111zh");

this.$i18n.locale = 'zh_CN';

}else{

console.log(this.$i18n.locale,"1111111111en");

this.$i18n.locale = 'en_US';

}

}