作为国际化的门户网站,支持多种不同的语言,以方便不同国家,不同语种的用户访问尤其重要,目前通过Vue I18n已实现中英文自由切换。
一、了解I18N
1、什么是I18N
i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称。在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件等)无需做大的改变就能够适应不同的语言和地区的需要。对程序来说,在不修改内部代码的情况下,能根据不同语言及地区显示相应的界面。
2、为什么要使用I18N
说到这不得不提及前端国际化,即:应用要服务于不同的地区的用户,所以应用不能单一语言;应用要能让不同地区的人无障碍使用就需要实现国际化。
在全球化的时代,国际化尤为重要,因为产品的潜在用户可能来自世界的各个角落
目前在各大商城项目中,对于国际化语言的需求越来越高了,其中最多的就是vue项目使用i18n插件实现多语言切换功能
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。官网:介绍 | Vue I18n
二、使用
1、vue 安装国际化i18n
npm install vue-i18n --save
cnpm install vue-i18n --save (淘宝镜像安装)
2、创建语言包文件
①:创建en.js文件:包含所有要翻译的文本对应的英文键值对
export const language = {
// 首页
index: "index",
// 大会活动
conventionActivities: "Convention Activities",
// 展览展示
exhibitions: "Exhibitions",
// 大会服务
conventionServices: "Convention Services",
// 关于
about: "about",
// 重大活动
majorEvents: "Major Events",
。。。。。。
}
②:创建zh.js文件:包含所有要翻译的文本对应的中文键值对
export const language = {
index: "首页",
conventionActivities: "大会活动",
exhibitions: "展览展示",
conventionServices: "大会服务",
about: "关于",
majorEvents: "重大活动",
。。。。。。
}
3、在main.js中引入并使用
//引入中英文切换插件vue-i18n
import VueI18n from "vue-i18n";
// 应用
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: "zh-CN", // 语言标识
messages: {
"zh-CN": require("./lang/zh"), // 通过require引入中文语言包
"en-US": require("./lang/en"), // 通过require引入英文语言包
},
});
// 注意还需将i18n注入到vue实例中
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount("#app");
4、在组件中使用
// 标签内使用
<li>{
{$t("language.brilliantMoments") }}</li>
// 标签属性中使用
<FormItem :label="$t('message')"></FormItem>
// js 中使用
this.$t('message')
5、在页面中切换语言
通过事件触发,点击切换语言,控制locale的值,调用对应的语言包,这里是通过 el-selct 选择对应语言来进行切换,点击对应选项后,通过更改this.$i18n.locale来切换当前语言,并将该语言存储在Vuex中
<el-select
v-model="language"
placeholder="请选择"
@change="languageSelect"
:popper-append-to-body="false"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
export default {
name: "NavBar",
data() {
return {
options: [
{
value: "zh-CN",
label: "中",
},
{
value: "en-US",
label: "EN",
},
],
}
}
methods: {
languageSelect(val) {
this.$nextTick(() => {
this.$i18n.locale = val; //设置语言
this.$store.commit("SET_LANG",val);
});
},
}
6、使用过程中注意事项
①、在js中使用时若将表达式写在data中,并不能响应变化,从而导致切换语言不生效,建议将表达式写到计算属性中,如:
computed: {
titleMain() {
return this.$t("language.conventionActivities");
},
// 通过computed获取vuex中的language状态,这样其他地方修改语言后这边可以监测到,并提供使用
lang() {
return this.$store.state.lang;
},
}
②、做好缓存和本地存储,不然页面刷新时还是会使用默认语言,上述步骤3,5中需做如下更改
步骤5中切换语言时:
在vuex中
步骤3中在mian.js引入时:
三、总结
上述只是我在项目中使用i18n多语言切换开发中的使用过程和注意事项,i18n的功能不止于此,还有如:格式化,组件插值,复数能实用功能,官网中都有详细的介绍和示例,大家感兴趣可以跟着官网例子做一遍。