vue i18n 多语言配置

我现在工作的公司是一家做区块链的公司 ，最近要用vue做一个后台管理系统 ， 我这一个angular的忠实用户就要开始啃vue这块大骨头了！事先为开发做准备 因为是做区块链的嘛！那后台管理系统肯定是要多语言喽！搞了两三个小时还算是皇天不负有心人吧！

那么直接晒图先看效果吧！

默认语言：English

切换语言：中文

 

事先准备：

1.element-ui（基于element-ui的多语言支持vue-i18n）

2.element-admin（参考地址：github地址：https://github.com/PanJiaChen/vue-element-admin）

3.功能实现 vuex , js-cookie状态管理

4.一个vue项目这个就不介绍了自己手动完成吧！

开始

1.安装vue-i18n

命令：项目目录下 npm install --save vue-i18n

2.安装 js-cookie，vuex

命令：npm install --save js-cookie

           npm install --save vuex

3.新建文件夹如图结构

4.语言部分配置

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' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
// import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
// import esLocale from './es'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
  ,
  // es: {
  //   ...esLocale,
  //   ...elementEsLocale
  // }
}
export function getLanguage() {
  const chooseLanguage = Cookies.get('language')
  if (chooseLanguage) return chooseLanguage

  // if has not choose language
  const language = (navigator.language || 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

en.js  zh.js（顾名思义英文,中文配置的地方里面为一个对象切换语言对应的文字单词,内容只供测试）

en.js

export default {

    hello:'hello',
    pap:'Hello vue'

}

zh.js

export default {

  hello: '你好',
  pap: '你好vue'

}

5.语言状态切换状态管理功能实现

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', false, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

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

export default store

getters.js(以为只有一个语言状态管理)

const getters = {

  language: state => state.app.language,
}
export default getters

app.js(如果看不懂的话可以科普一下vuex的知识)

import { getLanguage } from '@/i18n/langs/index'
import Cookies from 'js-cookie'
const state = {
  language: getLanguage()
}
const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  },

}
const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

以上为新加文件夹相关测试配置

6.main.js配置导入

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './i18n/langs';
import Cookies from 'js-cookie'
import store from './store'
Vue.use(ElementUI, {
  // size: Cookies.get('size') || 'medium', // set element-ui default size
  i18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
})

   App.vue配置导入(目的：每次网页刷新保存当前vuex状态值)

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(Object.assign({},
        this.$store.state,
        JSON.parse(sessionStorage.getItem("store"))
      ))
      sessionStorage.removeItem('store');
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  /*color: #2c3e50;*/
  /*margin-top: 60px;*/
}
</style>

 

7.为了项目简洁我创建了一个组件这个因人而异

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <i class="el-icon-share"></i>
    </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>
</template>
<script>
  export default {
    computed: {
      language() {
        return this.$store.getters.language
      }
    },
    methods: {
      handleSetLanguage(lang) {
        console.log(lang)
        this.$i18n.locale = lang
        console.log(this.$store)
        this.$store.dispatch('app/setLanguage', lang)
        this.$message({
          message: 'Switch Language Success',
          type: 'success'
        })
      }
    }
  }
</script>

效果展示我放在了home.vue里面

<template>
  <el-container style="height: 100%">
    <div class="con">
      <lang-select class="right-menu-item hover-effect"/>
      <p> {{$t("pap")}}</p>
      <router-view></router-view>
    </div>
  </el-container>
</template>

<script>
  import LangSelect from '../../components/langSelect'
  export default {
    name: 'Home',
    components: {LangSelect},
    data() {
      return {}
    }, methods: {
      go: function () {
        this.$router.push({path: 'Page2'})
      }
    }
  };
</script>

将相关组件引用即可看到效果喽！

为了大家快速看到简洁的效果代码直接优化掉了一部分，所以会跟开头的有区别，但是功能是相同的！好了多语言的支持就到这里就结束了,希望对大家有帮助，可能写的有点啰嗦，因为我是一个新手嘛！所以要多理解新手的感受，感觉对大家有帮助的记得关注哦！会持续更新项目中遇到的问题！