项目国际化I18N多语言切换

作为国际化的门户网站，支持多种不同的语言，以方便不同国家，不同语种的用户访问尤其重要，目前通过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-selectv-model="language"placeholder="请选择"@change="languageSelect":popper-append-to-body="false"><el-optionv-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的功能不止于此，还有如：格式化，组件插值，复数能实用功能，官网中都有详细的介绍和示例，大家感兴趣可以跟着官网例子做一遍。

项目国际化I18N多语言切换相关推荐

springMVC项目国际化(i18n)实现方法
SpringMVC项目国际化(i18n)实现方法按照作息规律,每周五晚必须是分享知识的时间\(^o^)/~,这周讲点儿啥呢,项目需要逼格,咱们国际化吧(*￣rǒ￣)~,项目中碰到这类需求的童鞋可能并 ...
前端vue最新vue-i18n国际化插件实现语言切换(带源码)
目录 1.安装i18n插件和elementUI插件注意:建议安装指定低版本插件!!! 解决办法 2.main.js全局挂载i18n和elementUI挂载 3.语言文件 en.js,代码如下 zh. ...
windows下安装python的i18n_python国际化(i18n)和中英文切换
[1.到Flex SDK3.2的bin下运行命令:copylocale en_US zh_HK 2.在flex project下创建一个文件夹locale(与src同目录),在locale下分别创建e ...
vue2项目使用i18n进行中英文切换
vue+element 使用i18n进行中英文切换文章目录前言一.下载vue-i18n插件二.定义中英文两套js文件,配置i18n,并在main.js中引入三.通过点击事件切换语言四.i1 ...
cocos creator国际化i18n多语言工具cc-i18n
cc-i18n介绍基于cocos creator引擎的游戏开发i18n多语言模块,是在nodejs环境下运行的i18n工具,所以需要确保安装nodejs环境. 该工具可以帮助你自动检测游戏预制体中的 ...
Android 项目国际化多国语言适配
近期一个项目 ,为了响应一带一路政策...要做国际化适配三国语言(中文,英语,葡萄牙语) emmm.... 那就开始搞吧首先在项目里面写好要适配国家的values-xxx-xx 比如: 各个国 ...
Qt之Qml 国际化—实现简易语言切换功能
目标:实现一个下拉框,具有切换语言的功能 GIF展示: 版本Qt5.14.2,版本不能低于5.10 qml控件 1.在QML文件中把需要翻译显示的文本用qsTr(" ")包裹起来 ...
vue3.0 引入i18n 做国际化 - 做动态语言切换
说明适合 vue2.0版本的官方链接如下: Vue I18nVue I18n 是 Vue.js 的国际化插件https://kazupon.github.io/vue-i18n/zh/ ...
安卓国际化（多语言切换），支持小语种
最近安卓开发遇到一个新的需求,需要支持多语言,而且还是我们五十六个大家庭中的藏语,一时间点懵了,毕竟从来没搞过多语言,一下来的还是比较小众的.后面研究了一番那个,还是大致搞出来了,这里简单写篇博客记一 ...

项目国际化I18N多语言切换

项目国际化I18N多语言切换相关推荐

最新文章

热门文章