最近做的vue项目要实现国际化语言,自己琢磨看文档写出了一个简单的不能再简单的demo,供大家参考!
注:vue-cli项目
1. npm安装
npm install vue-i18n --save
2. i18n使用,在项目入口文件 main.js 中引入
import VueI18n from 'vue-i18n';
在 src 目录下创建一个 language 的文件夹,里面建两个 js
import en from './language/en'; // 引入en.js 英文内容
import cn from './language/cn'; // 引入cn.js 中文内容
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'cn', // 语言标识
messages: {
'cn' : require('./language/cn');
'en' : require('./language/en');
}
})
vue实例中引入
new Vue({
el: '#app',
router,
i18n,
render: h => h(APP)
})
3. cn.js 和 en.js 内容
cn.js
module.exports = {
navList:{
solution: 'Solution',
product: 'Product',
place:'请输入搜索内容'
}
}
en.js
module.exports = {
navList:{
solution: 'Solution',
product: 'Product',
place:'Please enter the search content'
}
}
4. 页面中使用
<div class="con">{{ $t('navList.solution') }}</div>
<div class="box">{{ $t('navList.product') }}</div>
//input框中 placeholder 的写法
<input type="text" :placeholder="$t('navList.place')">
5. data中定义的字段翻译
rules:{
name:' cannot be empty'
}
rules: {name: [{ required: true, message: this.$t('rules.name'), trigger: 'change' }]}
6. 页面中英文切换(需要写点击事件)
tabCn: function(){
this.$i18n.locale = 'cn'
},
tabEn: function(){
this.$i18n.locale = 'en'
}
如果大家有更好的方法,欢迎留言讨论