本文介绍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 

// 设置localStorageexport const setStorage = function(key, obj) {    let json = JSON.stringify(obj) window.localStorage.setItem(key, json)} // 获取localStorageexport const getStorage = function(key) {    const str = window.localStorage.getItem(key) if (!str) {        return null    }    return JSON.parse(str)}// 移除localStorageexport 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'// 引入项目中需要用到的中英文文案配置jsimport 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')调用。

    
       {
   { $t('login.username') }}
     
    复制代码

main.js 引入 i18n 配置文件

import i18n from './i18n'new Vue({    router,    i18n,    store,    render: h = >h(App)}).$mount('#app')复制代码

语言切换组件

文件位置：

src/views/component/Lang.vue

     复制代码

使用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 做到存储用户语言设置并动态更新，无需刷新页面。