一.下载
1. npm i vue-i18n -D //i是install缩写 --save-dev -D是--save-dev的缩写 (优点:用于开发环境,减少打包大小, 写入devDependencies )
2. npm i vue-i18n -S //-S是--save的缩写(用于生产环境, 写入dependencies)
二.使用
1.main.js中
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// 以下为语言包单独设置的场景,单独设置时语言包需单独引入
const messages = {
'zh': require('../assets/i18n/zh'), // 中文语言包
'en': require('../assets/i18n/en') // 英文语言包
}
// 最后 export default,这一步肯定要写的。
export default new VueI18n({
locale : 'en', // set locale 默认显示英文
messages : messages // set locale messages
})
然后在main.js里面全局引入并挂载
new Vue({
el: '#app',
i18n, //挂载i18n
router,
store,
components: { App },
template: '<App/>'
})
这样我再组件login.vue里面就可以使用了
//template
<h3>{{$t("login.title")}}</h3>
<button @click='langToggle'>en/中</button>
//js
methods:{
langToggle(){
if(this.$i18n.locale = 'zh_CN'){
this.$i18n.locale = 'en_US';
}else{
this.$i18n.locale = 'zh_CN';
}
}
}