前言

项目做到一定程度，有了跨语言需求。查阅发现目前前端较为通用的跨语言方式是i18n，遂实践。

配置步骤

  1. 下载对应vue版本的vue-i18n 版本

  2. 在合适位置创建i18n目录

image-20250216183216912

  1. 根据语言创建对应的json文件

i18n.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import Vue from "vue";
import VueI18n from "vue-i18n";
import cn from "@/locales/zh-CN/index.json";
import en from "@/locales/en/index.json";
Vue.use(VueI18n);
const langList = ["en", "zh"];
const initKey = initLangKey();
// 根据偏好和浏览器属性初始化语言
function initLangKey() {
  let langkey = localStorage.getItem("langkey");
  if (!langkey) {
    const lang = (navigator.language || navigator.browserLanguage)
      .toLowerCase()
      .substring(0, 2);
    switch (lang) {
      case "en":
        langkey = "en";
        break;
      case "zh":
        langkey = "zh";
        break;
      default:
        langkey = "en";
        break;
    }
  } else if (!langList.includes(langkey)) {
    langkey = "zh";
  }
  localStorage.setItem("langkey", langkey);
  return langkey;
}
const i18n = new VueI18n({
  locale: initKey,
  messages: {
    en: Object.assign({}, en),
    zh: Object.assign({}, cn),
  },
});
export default i18n;

main.js

1
2
3
4
5
6
7
8
import i18n from "./locales/i18n";

new Vue({
  i18n, // 引入
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
  1. 组件中使用（三种场景）

以中英为例

1
2
3
4
5
6
7
8
// zh-CN/index.json
{
  "title": "天气",
}
// en/index.json
{
  "title": "weather",
}

<template>中

1
2
<div>{{ $t("title") }}</div>
<div :title="$t('title')"></div>

<script>中

1
this.title = this.$t("title");

.js中

1
2
3
4
5
import i18n from "@/locales/i18n";

function test() {
	return i18n.t("title");
}

VSCode i18n Ally插件的使用

扩展中搜索 “i18n Ally”，安装后插件会自行识别，可在此工作台进行语言标签的CRUD。

参考文档： 我的国际化多语言开发之路