Vue+Element中英文切换---精准使用

1、在main.js里配置如下：
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import store from ‘./store’
import ElementUI from ‘element-ui’;
import Cookies from ‘js-cookie’
import i18n from ‘./lang’

Vue.use(ElementUI, {
  size: Cookies.get('size') || 'small',
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
})

2、创建对应的lang文件，这里是在同级目录下

3、lang目录下的index.js文件配置如下：
import Vue from ‘vue’
import VueI18n from ‘vue-i18n’
import Cookies from ‘js-cookie’
import elementEnLocale from ‘element-ui/lib/locale/lang/en’
import elementZhLocale from ‘element-ui/lib/locale/lang/zh-CN’//
import enLocale from ‘./en’
import zhLocale from ‘./zh’

Vue.use(VueI18n)

const messages = {
en: {
…enLocale,
…elementEnLocale
},
zh: {
…zhLocale,
…elementZhLocale
}
}
export function getLanguage() {
const chooseLanguage = Cookies.get(‘language’)
if (chooseLanguage) return chooseLanguage

// if has not choose language
const language = (window.navigator.language || window.navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)
for (const locale of locales) {
    if (language.indexOf(locale) > -1) {
        return locale
    }
}
return 'en'

}
const i18n = new VueI18n({
// set locale
// options: en | zh | es
locale: getLanguage(),
// set locale messages
messages
})

export default i18n

需安装vue-i18n和js-cookie
npm install vue-i18n --save
npm install js-cookie --save

4、此时还需配置相应的store

index.js文件里的配置如下：
import Vue from ‘vue’
import Vuex from ‘vuex’
import look from ‘./modules/look’
import app from ‘./modules/app’
import getters from ‘./getters’

Vue.use(Vuex)

const store = new Vuex.Store({
modules: {
look,
app
},
getters
})

export default store

getters.js文件里的配置：
const getters = {
language: state => state.app.language,
size: state => state.app.size,
number: state => state.look.number
}
export default getters

app.js里的配置：
import Cookies from ‘js-cookie’
import { getLanguage } from ‘@/lang/index’

const state = {
language: getLanguage(),
size: Cookies.get(‘size’) || ‘medium’
}

const mutations = {
SET_LANGUAGE: (state, language) => {
state.language = language
Cookies.set(‘language’, language)
},
SET_SIZE: (state, size) => {
state.size = size
Cookies.set(‘size’, size)
}
}

const actions = {
setLanguage({ commit }, language) {
commit(‘SET_LANGUAGE’, language)
},
setSize({ commit }, size) {
commit(‘SET_SIZE’, size)
}
}

export default {
namespaced: true,
state,
mutations,
actions
}

5、zh.js和en.js文件export出去就可以了
export default {
page: {
jump: ‘跳转’
}
}

6、创建切换中英文的vue文件

项目实战，希望能帮到有需要的人！