vue的多语言化

vue的多语言化

1. 安装依赖包

npm install vue-i18n

2.在main.js中引入

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh',    // 语言标识
    messages: {
      'zh': require('./i18n/lang/zh'),   // 中文语言包
      'en': require('./i18n/lang/en')    // 英文语言包
    }
})

敲黑板了，划重点

new Vue({
	el: '#app',
    router: router,
    store: store,
    i18n,   //记得挂载
    template: '<App/>'
})

3. 在与main.js的同级目录下，新建文件夹，命名为 i18n (命名可任意，但要与上边路径相符)，如下图，文件层级
   

4. en.js 放置英文翻译
   

5. zh.js 放中文目录
   

6. index.js 挂载到vue
   

7. 在某个地方放置一个切换按钮，事件控制切换中英文
   
   在所需的地方使用 {{ $t(“名称”)}}