[9] Vue i18n

1 Vue i18n简介

vue i18n是Vue的国际化插件，官网https://kazupon.github.io/vue-i18n/zh/

2 Vue i18n安装和配置

1、安装

cnpm install vue-i18n --save

2、配置
在src中建立语言文件

image.png

export const long = {
  home: "家",
  name: "中文"
}

export const long = {
  home: "home",
  name: "english"
}

在main.js中注册并使用插件

import Vue from 'vue'
import App from './App.vue'
import store from './vuex/store'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import VueI18n from "vue-i18n";

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('./i18n/language-zh'),
    'en': require('./i18n/language-en')
  }
})

new Vue({
  render: h => h(App),
  store,
  i18n
}).$mount('#app')

3 Vue i18n使用

在组件中使用i18n

1）利用i18n.locale='zh'来切换本地化环境，来切换i18n使用的语言文件