算了,这个不多讲,看官网:http://kazupon.github.io/vue-i18n/zh/
import i18n from './lang';
// 设置国际化
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
});
new Vue({
el: '#app',
i18n,
render: h => h(App)
});
//index.js文件
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from 'element-ui/lib/locale/lang/en';
import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(VueI18n);
const messages = {
en: {
message: {
hello: '{msg} world'
},
...enLocale
},
zh: {
message: {
hello: '{msg} 世界'
},
...zhLocale
}
};
const i18n = new VueI18n({
locale: 'zh', // set locale
messages // set locale messages
});
export default i18n;
<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
<p v-html="$t('message.hello')" />
Look,是不是很简单,已经有了雏形,开始精加工
//zh.js
export default {
app: {
LanguageChage: '语言切换',
editPassword: '修改密码',
signOut: '登出'
}
};
//en.js
export default {
app: {
LanguageChage: 'Language switching',
editPassword: 'Change Password',
signOut: 'Sign out'
}
};
在封装组件之前,咱们先去封装一个方法,保存语言状态值, 更新之前的 lang/index.js 文件,主要是 getLanguage 方法
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import Cookies from 'js-cookie';
import enLocaleElement from 'element-ui/lib/locale/lang/en';
import zhLocaleElement from 'element-ui/lib/locale/lang/zh-CN';
import zhLocale from './zh';
import enLocale from './en';
Vue.use(VueI18n);
// 语言环境信息
const messages = {
en: {
...enLocale,
...enLocaleElement
},
zh: {
...zhLocale,
...zhLocaleElement
}
};
// 获取语言环境并保留状态
export function getLanguage() {
const cookieLanguage = Cookies.get('language');
if (cookieLanguage) return cookieLanguage;
const browerLanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
const locales = Object.keys(messages);
for (const locale of locales) {
if (browerLanguage.indexOf(locale) > -1) {
return locale;
}
}
}
const i18n = new VueI18n({
locale: getLanguage(),
messages,
fallbackLocale: 'zh'
});
// 热更新
if (module.hot) {
module.hot.accept(['./en', './zh'], function() {
i18n.setLocaleMessage('en', require('./en').default);
i18n.setLocaleMessage('zh', require('./zh').default);
});
}
export default i18n;
vuex仓库中增加language字段, 一般大家应该都是用vuex的吧,这里我用vuex的module模式来写, 其实随意,都可以。
// app.js 这是我的store文件
import { getLanguage } from '@/lang/'; // 引入之前写好的方法
// state里增加language字段
const state = {
language: getLanguage()
};
const mutations = {
SETLANGE: (state, language) => {
state.language = language;
Cookies.set('language', language);
}
};
const actions = {
setLanguage({ commit }, language) {
commit('SETLANGE', language);
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
<template>
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
语言切换
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh'" command="zh">
中文
</el-dropdown-item>
<el-dropdown-item :disabled="language==='en'" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
language() {
return this.$store.getters.language; //这里我用getters处理,代码不贴了,你么你随意
}
},
methods: {
handleSetLanguage(lang) {
// 通过VueI18n的根实例设置当前的语言环境 不懂请看文档 http://kazupon.github.io/vue-i18n/zh/api/#%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7
this.$i18n.locale = lang;
this.$store.dispatch('app/setLanguage', lang);
this.$message({
message: 'Switch Language Success',
type: 'success'
});
}
}
};
</script>
等等,还没完,接下来才是最重要的。
一般vue项目的菜单都是在route中去写的,此时无法直接使用模板语法进行国际化,所有咱们还要封装一个方法,用来处理菜单标题
/**
*生成字符- 国际化使用
* @param {*} lanuageKey 语言对象键值
* @param {*} title 要转换的值
*/
export function generateText(lanuageKey, title) {
const key = this.$te(`${lanuageKey}.${title}`);
if (key) {
return this.$t(`${lanuageKey}.${title}`);
}
return title;
}
找到渲染菜单的文件,引入刚刚的方法,进行菜单标题格式化
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item
:index="resolvePath(onlyOneChild.path)"
:submenu-title-noDropdown':!isNest}"
>
<item
:icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
:title="generateText('route', onlyOneChild.meta.title)"
/>
</el-menu-item>
</app-link>
//引入方法
import { generateText } from '@/utils/';
//methods里调用下
methods: {
generateText
}
此时你的配置应该是这样的
// zh.js
export default {
route: {
home: '首页',
}
}
//router.js (title中的home要和你的zh.js里的key值对应)
{
path: '/',
component: Layout,
redirect: '/home',
children: [{
path: 'home',
name: 'Home',
component: () => import('@/views/home/index'),
meta: { title: 'home', icon: 'home' }
}]
}
此时你得菜单项便可以正常渲染了
到此便正式结束,其实还蛮简单的,当然i18n有很多个语法,大家自行查阅文档,谢谢!
internationalization (国际化)简称:i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n。 一般用语言_地区的形式表示一种语言,如:zh_CN表示简体中文
有些项目我们需要支持多种语言切换,满足国际化需求。 vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。
新建目录结构如下:assets/langs/index.js内容如下:loadLanguageAsync是实际用于更改语言的函数。比如在路由钩子中获取到当前语言环境加载对应语言包
我遇到过一些人,他们根本不认为CSS与国际化有关,但如果你仔细想想,国际化不仅仅是把你网站上的内容翻译成多种语言,然后就收工了。该内容的呈现方式有各种细微的差别,这些细微的差别会影响到母语人士使用您的网站的体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!