整体目录
根据自己的需要加载表情包，不需要在页面上手动切换使用 i18n 手动切换语言根据自己的需要加载表情包，不需要在页面上手动切换
// 在main.js中引入并设置// import locale from "element-ui/lib/locale/lang/zh-CN";import locale from 'element-ui/lib/locale/lang/en'Vue.use(ElementUI, {locale, size: 'small' })
使用 i18n 手动切换语言
安装相关依赖
npm install vue vue-i18n --save- 注意两者版本匹配问题，不然安装报错
在 src 目录下创建 lang 文件夹（包含不同的语言包：zh.js\en.js…\index.js）。各个文件的内容如下：
//zh.jsexport default {item: {username: '用户名',password: '密码',email: '邮箱',},}
//en.jsexport default {item: {username: 'Username',password: 'Password',email: 'Email',},}
//index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import elementEnLocale from 'element-ui/lib/locale/lang/en'import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'import elementLocal from 'element-ui/lib/locale'import enLocale from './en'import zhLocale from './zh'Vue.use(VueI18n)const messages = {en: {...enLocale,...elementEnLocale,},zh: {...zhLocale,...elementZhLocale,},}const i18n = new VueI18n({locale: localStorage.getItem('language') || 'zh',messages,})elementLocal.i18n((key, value) => i18n.t(key, value))export default i18n
在 src/store 中设置 language 的相关信息
//src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {language: localStorage.getItem('language') || 'zh',},mutations: {SET_LANGUAGE: (state, language) => {state.language = languagelocalStorage.setItem('language', language)},},actions: {setLanguage({commit }, language) {commit('SET_LANGUAGE', language)},},getters: {language: (state) => {return state.language},},})
在页面中应用完成语言的切换
<template><div><el-dropdown trigger="click" @command="handleSetLanguage"><div>选择语言</div><el-dropdown-menu slot="dropdown"><el-dropdown-item :disabled="language === 'zh'" command="zh">中文</el-dropdown-item><el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item></el-dropdown-menu></el-dropdown><div><p>用户：{{ $t('item.username') }}</p><p>密码：{{ $t('item.password') }}</p><p>邮箱：{{ $t('item.email') }}</p></div></div></template><script>export default {name: 'Lang',data() {return {dateTime: '',}},computed: {language() {return this.$store.getters.language},},methods: {handleSetLanguage(lang) {this.$i18n.locale = langthis.$store.dispatch('setLanguage', lang)},},}</script>
