子羽前端

简体中文

English

简体中文

English

Appearance

简介 ​

i18n，是 internationalization 单词的简写，中间 18 个字符略去，简称 i18n，意图就是实现国际化，方便产品在不同的场景下使用

vue-i18n 版本 ​

  • v8.x 适用于 vue2
  • v9.x 适用于 vue3

实现基本思路 ​

  1. 定义语言包：需要几种语言展示，就定义几个语言包
  2. 创建对象:对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象
  3. 创建 vue-i18n 实例，同时为其 messages 属性为第 2 步创建的对象，为其 locale 属性赋值为第 2 步中语言对象对应的 key
  4. 创建 app 实例，将 i18n 的插件注入进 app 中
  5. 在组件中渲染现有的语言列表，添加切换按钮，展示效果

i18n 在 vue3 中使用代码 ​

ts
// i18n/index.ts
// 1. 定义语言包：
import { createI18n } from "vue-i18n";

const zh = {
  message: {
    username: "用户名111",
    email: "邮箱",
    mobile: "手机",
  },
};
const en = {
  message: {
    username: "Username22",
    email: "Email",
    mobile: "Mobile",
  },
};
// 创建对象，对语言包进行整合
const messages = {
  zh,
  en,
};

const i18n = createI18n({
  legacy: false, // vue3中必须要标记为false
  messages,
  locale: "en",
});
export { i18n };
ts
// mian.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { i18n } from "./i18n";

let app = createApp(App);

app.use(i18n);

app.mount("#app");
vue
<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { i18n } from "./i18n";

const { t } = useI18n();
const local = ref("en");
const changeOption = () => {
  i18n.global.locale.value = local.value;
};
</script>

<template>
  <div>
    <p>
      语言切换:
      <select v-model="local" @change="changeOption" style="width: 150px">
        <option
          v-for="locale in $i18n.availableLocales"
          :key="`locale-${locale}`"
          :value="locale"
        >
          {{ locale }}
        </option>
      </select>
    </p>
    <br />
    <b>基本信息：</b>
    <p>{{ t("message.username") }} : 张三</p>
    <p>{{ t("message.email") }} : [email protected]</p>
    <p>{{ t("message.mobile") }} : 18480000000</p>
  </div>
</template>

i18n 在 vue2 中使用代码 ​

js
// i18n/index.js
import VueI18n from "vue-i18n";
import Vue from "vue";

Vue.use(VueI18n);
// 1. 定义语言包：
const zh = {
  message: {
    username: "用户名",
    email: "邮箱",
    mobile: "手机",
  },
};
const en = {
  message: {
    username: "Username",
    email: "Email",
    mobile: "Mobile",
  },
};
// 创建对象，对语言包进行整合
const messages = {
  zh,
  en,
};

const i18n = new VueI18n({
  messages,
  locale: "en",
});

export { i18n };
js
// main.js
import Vue from "vue";
import App from "./App";
import router from "./router";
import { i18n } from "./i18n";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  i18n,
  components: { App },
  template: "<App/>",
});
vue
<template>
  <div class="hello">
    <h2>Essential Links</h2>
    <p>
      语言切换:
      <select v-model="local" @change="changeOption" style="width: 150px">
        <option
          v-for="locale in $i18n.availableLocales"
          :key="`locale-${locale}`"
          :value="locale"
        >
          {{ locale }}
        </option>
      </select>
    </p>
    <br />
    <b>基本信息：</b>
    <p>{{ $t("message.username") }} : 张三</p>
    <p>{{ $t("message.email") }} : [email protected]</p>
    <p>{{ $t("message.mobile") }} : 18480000000</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      local: "en",
    };
  },
  methods: {
    changeOption() {
      this.$i18n.locale = this.local;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

在线实例： ​

框架插件 ​

jQuery ： jquery.i18n.properties.min.js

Vue: vue-i18n

React: react-i18next