第十一章 多语言国际化

一、安装依赖

cnpm install vue-i18n

二、添加配置

在src下创建il8n文件夹，在新建一个index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale:"zh_cn",
    messages:{
        'zh_cn':require('@/assets/languages/zh_cn.json'),
        'en_us':require('@/assets/languages/en_us.json')
    }
})

export default i18n

三、在assets里languages新建en_us.json和zh_cn.json

{
    "common":{
        "home":"首页",
        "login":"登陆",
        "logout":"退出登陆",
        "doc":"文档",
        "blog":"博客"
    }
}

{
    "common":{
        "home":"首页",
        "login":"登陆",
        "logout":"退出登陆",
        "doc":"文档",
        "blog":"博客"
    }
}

四、在main.js 引入i18n并注入vue对象中

import i18n from './il8n'

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

五、修改Home.vue 加入国际化

<h3>{{$t('common.doc')}}</h3>
<el-button @click="changeLanguage('zh_cn')">简体中文</el-button>
<el-button @click="changeLanguage('en_us')">English</el-button>

changeLanguage(lang){
    lang === ''?  'zh_cn': lang
    this.$i18n.locale = lang
    this.langVisible = false
}

六、效果展示