#Vue 国际化语言切换

#需求场景

  前期开发 Vue2 H5 项目时，需要对项目进行国际化处理，该项目是基于 Vue2+VantUI2.x 的移动端 H5 SPA 项目。网上查阅了相关资料，大多推荐使用 vue-i18n 国际化插件来实现不同语言的切换。经过测试，已基本实现 中文 和 英文 两种语言的切换。

  现在主流的前端 UI 框架也支持语言国际化，若项目中使用 UI 框架比较多，建议参考 UI 官方文档来配置国际化。Vue I18n 通过简单的 API 来实现项目的国际化；该插件除了简单的翻译之外还支持 数字、日期时间 等本地化处理。

#相关文档

#I18n 官方文档

• Vue I18n (v8) 中文文档

• Vue I18n (v9) 英文文档

#依赖安装

1npm install vue-i18n

#引入插件

1import Vue from "vue";
2
3import VueI18n from "vue-i18n";
4
5Vue.use(VueI18n);

#基本设置

1const messages = {
2	en: {
3		message: {
4			hello: "hello, world!"
5		}
6	},
7	zh: {
8		message: {
9			hello: "你好，世界！"
10		}
11	}
12};

1// 创建 VueI18n 实例
2const i18n = new VueI18n({
3	locale: "en", // 设置地区
4	messages // 设置地区信息
5});
6
7// 创建挂载 Vue 实例
8new Vue({
9	router,
10	i18n,
11	render: h => h(App)
12}).$mount("#app");
13
14// 更改为其它的 locale
15i18n.locale = "zh";

#页面使用

1<template>
2	<div class="change_lang">
3		<!-- 输入结果为：你好，世界！ -->
4		<h1>{{$t('message.hello')}}</h1>
5	</div>
6</template>
7
8<script>
9	export default {
10		name: "ChangeLang",
11		data() {
12			return { langs: ["zh", "en"] };
13		},
14		methods: {
15			handleLang() {
16				this.$i18n.locale = "zh";
17			}
18		}
19	};
20</script>

#总结

  项目中使用多语言的情况还是比较常见的，该插件是 Vue 官方团队成员开发的多语言工具，具体配置可查阅官方文档，具体文档见上部 相关文档 模块。