vue国际化语言实现中英文切换

1.安装vue-i18n

2.main.js中引入  import i18n from './i18n/i18n'

3.挂载到vue实例下

4.项目文件夹下如下配置

zh-CN.js文件：

import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // 引入element语言包

import store from '../../store'

const cn = {

  message: {

    'placeholderAddress': '请选择住址',

    'demoShow': store.getters.config.projectName,

    'name': '姓名',

    'school': '学校',

    'adress': '住址',

    'placeholderDate': '请选择日期',

    'placeholderTime': '请选择时间',

    'profile': '个人简介',

    'text': '好好学习，天天向上'

  },

  ...zhLocale

}

export default cn

en.js文件：

import enLocale from 'element-ui/lib/locale/lang/en' // 引入element语言包

const en = {

  message: {

    'placeholderAddress': 'Please Choose Adress',

    'demoShow': 'demoShow',

    'name': 'name',

    'school': 'school',

    'adress': 'adress',

    'placeholderDate': 'Please Choose Date',

    'placeholderTime': 'Please Choose Time',

    'profile': 'profile',

    'text': 'Good good study, Day day up'

  },

  ...enLocale

}

export default en

index.js文件

import en from './en'

import cn from './zh-CN'

export default {

  en: en,

  cn: cn

}

i18n.js文件：

import Vue from 'vue'

import locale from 'element-ui/lib/locale'

import VueI18n from 'vue-i18n'

import messages from './langs'

Vue.use(VueI18n)

// 从localStorage获取语言选择。

const i18n = new VueI18n({

  locale: localStorage.lang || 'en', // 初始未选择默认 cn 中文

  messages

})

locale.i18n((key, value) => i18n.t(key, value)) // 兼容element

export default i18n

需要切换的文字$t('message.school')，直接获取key映射value