基于Vue+ElementUI架构的前端国际化解决方案

1.项目目录结构

├── build                      构建相关配置文件

 |     |── index.js             webpack的基础配置入口

├── mock                     项目mock 模拟数据 在后端没有提供接口的情况下可以拦截自己的数据进行开发

├── public                     静态资源

 │   │── favicon.ico           favicon图标

 │   └── index.html           html模板，主html入口

├── dist                         项目构建后生成的目录结构

 |     |── index.html

 |     |── static

 |     |── css

 |     |── js

 |     |── images

├── src                      源代码

 │   ├── api                  存放数据请求的接口，目录下的js命名（模块名.js）

 │   ├── assets               存放静态资源，如字体,图片,公共样式，js等

 │   ├── components         全局公用组件 如有一个独立功能需要建立多个组件请建立文件夹

 │   ├── directive             全局指令

 │   ├── filters                 全局 filter

 │   ├── icons                 项目所有 svg icons

 │   ├── language           多语言配置

 │   ├── layout               全局 layout，框架布局目录

 │   ├── router               路由

 │   ├── store                 全局 store管理 VueX目录

 │   ├── styles               全局样式

 │   ├── utils                  全局公用方法

 │   ├── views                 views 所有页面 主要用于存放导航或者侧边栏，路由配置成嵌套路由即可存在导航或侧边栏

 │   ├── App.vue             入口页面

 │   ├── main.js              入口文件 加载组件 初始化等

 │   └── permission.js         权限管理

├── tests                     测试

├── .env.xxx                  环境变量配置，测试，线上等

├── .eslintrc.js                  eslint 配置项

├── .babelrc                  babel-loader 配置

├── .travis.yml                自动化CI配置

├── vue.config.js              vue-cli 配置

├── postcss.config.js           postcss 配置

└── package.json               package.json，依赖安装及版本

2.安装多语言模块  npm install vue-i18n --save

创建目录 /src/language，并分别创建文件 en.json、index.js、lang.js、zh.json，以中英文语言切换为例，如果需要增加其他语言，可增加相应的 .json文件即可

├── src                      源代码

 │   ├── language           多语言配置目录

 │   │   │── index.js          多语言核心入口文件

 │   │   │── lang.js           存储用户的语言选择

 │   │   │── en.json          中文配置文件

 │   │   │── zh.json          英文配置文件

......

/src/language/index.js 文件的内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import LangStorage from './lang'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)


const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'
const locales = {
    zh: Object.assign(require('./zh.json'), zhLocale),
    en: Object.assign(require('./en.json'), enLocale)
}
const i18n = new VueI18n({
    locale: LangStorage.getLang('zh'),
    messages: locales
})
export const setup = lang => {
    if (lang === undefined) {
        lang = window.localStorage.getItem(LOCALE_KEY)
        if (locales[lang] === undefined) {
            lang = DEFAULT_LANG
        }
    }
    console.log(lang)
    window.localStorage.setItem(LOCALE_KEY, lang)
    Object.keys(locales).forEach(lang => {
        document.body.classList.remove(`lang-${lang}`)
    })
    document.body.classList.add(`lang-${lang}`)
    document.body.setAttribute('lang', lang)
    Vue.config.lang = lang
    i18n.locale = lang
}
window.i18n = i18n
export default i18n

/src/language/index.js 文件的内容如下：

export default {
    setLang (lang) {
        window.localStorage.setItem('user_lang', lang)
    },
    getLang (defaultLang) {
        const localLang = window.localStorage.getItem('user_lang')
        if (localLang === null) {
            return defaultLang
        } else {
            return localLang
        }
    }
}

/src/language/zh.json 文件的内容如下：

{
    "main": {
        "hello": "你好"
    },
    "Form": "表单",
    "router": {
        "maybe": "也许"
    }
}

/src/language/en.json 文件的内容如下：

{
    "main": {
        "hello": "Hello"
    },
    "Form": "Form",
    "router": {
        "maybe": "Maybe"
    }
}

/src/main.js中新增代码如下：

import i18n from './language'

Vue.use(ElementUI, {
    i18n: (key, value) => i18n.t(key, value)
})

new Vue({
    el: '#app',
    i18n,
    router,
    store,
    render: h => h(App)
})

3.模板中使用

<el-button @click="changeLanguage">中英切换</el-button>

<div>{{$t("main.hello")}}</div>

......

import { setup } from '@/language/index.js'

import LangStorage from '@/language/lang'

methods:{
            changeLanguage () {
                if (this.$i18n.locale === 'en') {
                    setup('zh')
                } else {
                    setup('en')
                }
                LangStorage.setLang(this.$i18n.locale)
            }

}

点击按钮即可查看切换效果~~