使用vue-i18n实现国际化

1. 安装：

npm install vue-i18n
复制代码

2. 在“vue-i18n.js”引入并配置国际化：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const messages = {    
    zh: {        
        home: '主页'    
    },    
    en: {        
        home: 'Home Page'    
    }
}

let lang = 'zh'

export default new VueI18n({    
    locale: lang,    
    messages
})复制代码

3. 在“main.js”将i18n挂载到vue的根实例上：

import i18n from './plugins/vue-i18n'

new Vue({    
    i18n,    
    render: h=>h(app)
}).mount('#app')复制代码

4. 在模板中使用

<template>
    <p>{{ $t('home') }}</p>
</template>
复制代码

5. 切换语言

this.$i18n.locale = 'en'复制代码