vue 手动选择切换设置语言（详细三步）

vue项目开发过程中，有的可能需要语言的切换，Element也提供了几种方法，国际化菜单中，我们更多时候想要的是，可以自由的切换，我们基于element改进一下。

我们使用插件vue-i18n 来更好的控制

---

第一步： 命令行执行 npm install vue-i18n --save
安装好 vue-i18n

保险起见看 package.json里是否安装好

---

第二步： main.js 引用并全局注册

import Vue from 'vue'
import App from './App'
import router from './router'
import { store } from './store/index'
import ElementUI from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
import VueI18n  from 'vue-i18n'

Vue.use(VueI18n)
const messages = {
  en: {...enLocale},
  zh: {...zhLocale}
}
const i18n = new VueI18n({
  locale: 'en',
  messages, 
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

Vue.use(ElementUI)
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: ''
})

问题： 考虑到有可能设置完之后，用户会刷新页面，那vue重新渲染，语言会恢复初始值，我们想要的是无论跳转到哪个页面，或者刷新都保持设置过的语言。

解决方案： 1.改的地方就是 i180里locale值时候先检测本地是否设置过，设置过的话获取之前设置的语言。2.以及将i80全局注册到vue，这点很重要。

const i18n = new VueI18n({
  locale: localStorage.getItem('language')||'en', //这里看本地是否设置过，不存在就使用英文 en
  messages, 
})

new Vue({
  el: '#app',
  store,
  router,
  i18n, //切记一定要在这里渲染i80
  components: { App },
  template: ''
})

---

第三步： 组件中设置

<template>
 <div class='content'>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <el-select v-model="value" @change="languge" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
</div>
</template>

<script>
export default {
  data() {
    return {
       value1:'',
       value:localStorage.getItem('language')||'en',//初始化时候获取上次存的值，并在处于选中状态。
       options: [
         {
          value: 'en',
          label: '英文'
        }, {
          value: 'zh',
          label: '中文'
        },
        ]
    };
  },
  methods: {
    languge(){
      this.$i18n.locale = this.value  //在main.js里设置的i180我们在这里调用，并赋值
      localStorage.setItem('language',this.value) //每次切换语言，本地存一下，防止刷新丢失。
    },
  }
};
</script>

---

最终效果
初始化时候日期组件是英文

---

切换成中文后日期组件变成中文

---

并且控制台也存下了设置后的 zh 值表示中文