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 languageconst 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 | eslocale: getLanguage(),// set locale messagesmessages
})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.defaultreturn 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 = languageCookies.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 sizei18n: (key, value) => i18n.t(key, value)
})
Vue.config.productionTip = false
new Vue({el: '#app',router,i18n,store,render: h => h(App)
})

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

 

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

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！