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';
}
}