# 五.补充功能（国际化）
前言
国际化的意思就是将我们写的项目，能够根据不同国家的语言，进行翻译，进行切换，方便不同国家的客户使用，在 vue 中我们使用 i18n 这个插件来实现项目的国际化功能。
# 1.Vue 相关配置
main.js
import i18n from "./i18n";
new Vue({
router,
i18n,
store,
render: (h: Function) => h(App),
}).$mount("#app");
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2.i18n 配置规则
/i18n/index.js
import Vue from "vue";
import VueI18n from "vue-i18n";
import cn_ZH from "./cn";
import en_US from "./en";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem("lang") || "cn_ZH", // 语言标识
messages: {
cn_ZH, // 中文语言包
en_US, // 英文语言包
},
});
export default i18n;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3.语言配置
/i18n/cn_ZH.js
export default {
resume: "个人简历",
aboutMe: "关于我",
frontEndSkill: "前端技能",
worksShow: "作品展示",
myExperience: "我的经历",
linkMe: "联系我",
leaveMessage: "留言板",
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
/i18n/en_US.js
export default {
resume: "resume",
aboutMe: "about me",
frontEndSkill: "front end skill",
worksShow: "works show",
myExperience: "my experiece",
linkMe: "link me",
leaveMessage: "leave message",
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
总结
通过以上流程可以看出插件的基本原理就是：前端组件通过 i18n 依据 语言环境 + 目标索引 为条件到相关目录下的配置文件中（如：/i18n/cn_ZH.js）通过索引拿到相关的目标字段。