语言包切换 中英文系统切换 vue实现中英文切换

1、引入i18n依赖  npm install vue-i18n

2、创建中英文包（需要什么字段自己添加，两个文件一一对应）

（1）en.js  英文

var en = {
  common:{
    inputTip:"please enter",
    selectTip:"please choose",
    requireTip:"Please complete the information",
  },
  login:{
    login: 'Login',
    tip1: 'Please enter correct information',
  },
}
export default en;

（2）zh.js 中文

var zh = {
  common:{
    inputTip:"请输入",
    selectTip:"请选择",
    requireTip:"请完善信息",
  },
  login:{
    login: '登录',
    tip1: '请输入正确的信息',
  },
}
export default zh;

3、创建 i18n.js

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

import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

import langZh from "@/assets/languages/zh.js"
import langEN from "@/assets/languages/en.js"

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: localStorage.getItem('lang') || 'zh',
    messages: {
        'zh': {...langZh,...zhLocale},
        'en': {...langEN,...enLocale}
    }
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

4、在main.js中引入  i18n.js 

import i18n from './i18n/index'
new Vue({
  i18n,
  store,
  router: router,
  render: h => h(App)
}).$mount('#app')
window.vm = new Vue({ i18n: i18n });

5、 切换语言方法

this.$i18n.locale = 'zh'
localStorage.setItem('lang', 'zh')

6、字段使用方法

$t('common.inputTip')