项目国际化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-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的功能不止于此，还有如：格式化，组件插值，复数能实用功能，官网中都有详细的介绍和示例，大家感兴趣可以跟着官网例子做一遍。

项目国际化I18N多语言切换

猜你喜欢