Vue国际化
本文介绍Vue如何做国际化，包括vue-i18n, element ui 等国际化配置，搭配vuex, localStorage使用，切换语言无需刷新页面。
前言
项目基于@vue/cli3脚手架搭建，如果你没有自己的项目框架，建议使用这个脚手架（传送门）。有了项目框架后，先安装Vue国际化组件库vue-i18n，然后看一下项目结构图：
i18n文件夹的标准结构就是这样，可以照着在自己的项目中创建好对应的文件。i18n/index.js 是国际化入口配置文件。zh-CN/index.js, en-US/index.js 分别为中文和英文具体的文案文件，接下来挨个分析。
工具方法文件
文件位置：
src/util.js
// 设置localStorage
export const setStorage = function(key, obj) {
let json = JSON.stringify(obj) window.localStorage.setItem(key, json)
}
// 获取localStorage
export const getStorage = function(key) {
const str = window.localStorage.getItem(key) if (!str) {
return null
}
return JSON.parse(str)
}
// 移除localStorage
export const removeStorage = function(key) {
window.localStorage.removeItem(key)
}
// 获取浏览器默认语言
export const getBrowserLang = function() {
let browserLang = navigator.language ? navigator.language: navigator.browserLanguage let defaultBrowserLang = ''
if (browserLang.toLowerCase() === 'cn' || browserLang.toLowerCase() === 'zh' || browserLang.toLowerCase() === 'zh-cn') {
defaultBrowserLang = 'zh-CN'
} else {
defaultBrowserLang = 'en-US'
}
return defaultBrowserLang
}vue-i18n组件库入口文件配置
文件位置：
src/i18n/index.js
使用localStorage存储用户选择的语言，方便用户下次进来不用再做切换操作。属性名为'lang'，值为'zh-CN' 或 'en-US'，分别代表中文、英文。
// 引入必要的库
import Vue from 'vue'
import VueI18n from 'vue-i18n'
// 引入element ui国际化文件
import elen from 'element-ui/lib/locale/lang/en'
import elcn from 'element-ui/lib/locale/lang/zh-CN'
// 引入工具函数
import { getStorage, removeStorage, getBrowserLang } from '@/util'
// 引入项目中需要用到的中英文文案配置js
import enLocale from './en-US'
import cnLocale from './zh-CN'
// 使用vue-i18n库
Vue.use(VueI18n)
// 获取当前语言（初始化时localStorage里没有存语言，默认为浏览器当前的语言）
const lang = getStorage('lang') || getBrowserLang()
// 组合element ui 和 项目自身的文案文件
const messages = {
'en-US': {
...elen,
...enLocale
},
'zh-CN': {
...elcn,
...cnLocale
}
}
// 创建vueI18n实例并输出，在main.js中调用
const i18n = new VueI18n({
locale: lang,
messages
})
export default i18n文件位置：
src/i18n/zh-CN/index.js
export default {
login: {
username: '用户名'
}
}文件位置：
src/i18n/en-US/index.js
export default {
login: {
username: 'username'
}
}举个例子在登录页面组件中，用户名字段区分中英文。使用 {{ $t('login.username') }} 替换具体的文案即可。另外在js代码中通过 this.$t('login.username') 调用。
<el-form-item>
{{ $t('login.username') }}<el-input v-model="form.username"></el-input>
</el-form-item>main.js 引入 i18n 配置文件
import i18n from './i18n'
new Vue({
router,
i18n,
store,
render: h = >h(App)
}).$mount('#app')语言切换组件
文件位置：
src/views/component/Lang.vue
<template>
<div>
<el-dropdown @command="handleSetLang" trigger="click">
<div class="lang-active">
<div v-for="(lang, i) in langs" :key="`LangActive${i}`" v-show="lang.key === activeLang">{{ lang.value }}
<i class="el-icon-arrow-down el-icon--right"></i></div>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(lang, i) in langs" :key="`Lang${i}`" :command="lang.key">
<span class="text">{{ lang.value }}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import {
mapGetters,
mapMutations
} from 'vuex';
export default {
name: 'Lang',
components: {},
data() {
return {
langs: [{
key: 'zh-CN',
value: '中文'
},
{
key: 'en-US',
value: 'EngLish'
},
],
}
},
computed: {
...mapGetters({
activeLang: 'language'
})
},
created() {},
mounted() {},
methods: {
...mapMutations(['setLanguage']),
handleSetLang(lang) {
// 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
this.$i18n.locale = lang
// 提交mutations
this.setLanguage(lang)
}
}
}</script> 使用element ui 的 dropdown 组件，大致效果如下，样式可自行调整
点击下拉菜单，调用 handleSetLang 方法，设置 this.i18n.locale 。如果 handleSetLang 方法里只写这句也可以实现语言切换效果，不过语言状态没有保存，刷新页面会重置到初始语言，这样肯定不是我们想要的。因此需要结合 localStorage 和 vuex。如果对vuex不熟悉，可以先去官方文档学习一下。如果你的项目没有用到vuex，也可以只使用 localStorage 通过刷新页面来更新视图。代码如下：
handleSetLang(lang) {
// 设置 i18n.locale
this.$i18n.locale = lang
// 使用 localStorage 存储语言状态
setStorage('lang', lang)
// 刷新页面更新视图
window.location.reload()
}vuex相关配置
文件位置：
src/store/index.js建一个language模块，用来响应式更新语言。
import Vue from 'vue'
import Vuex from 'vuex'
import language from './modules/language'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
language
}
})文件位置：
src/store/language.js
import {
getStorage,
setStorage,
getBrowserLang
}
from '@/util'
export default {
state: {
language: getStorage('lang') || getBrowserLang() // 项目初始化时，默认为浏览器的语言
},
getters: {
language: state = > state.language
},
mutations: {
setLanguage: (state, language) = > {
state.language = language
setStorage('lang', language)
},
}
}总结
使用 vue-i18n 组件库，在语言切换组件中设置 this.$i18n.locale ，vue-i18n 会根据配置文件使用对应的中英文文案文件。配合 localStorage 和 vuex 做到存储用户语言设置并动态更新，无需刷新页面。