正文
基于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)
}
}
点击按钮即可查看切换效果~~
