[JavaScript知识库]在vue3使用vue-i18n@9

在vue3使用vue-i18n@9

vue-i18n@9文档地址Home | Vue I18n (intlify.dev)

vue-i18n是vue的国际化插件, 它可以轻松将一些本地化功能集成到Vue.js项目中.

Get Started

下载并引入

• 先简单搭建一个vue3 demo

  vue create <project name>

• 安装vue-i18n

  npm install vue-i18n@next
  # or
  yarn add vue-i18n@next
  

  import { createApp } from 'vue'
  import { createI18n } from 'vue-i18n/index'; // /index
  
  import App from './App.vue'
  
  const app = createApp(App);
  const i18n = createI18n({
      legacy: false, // 使用CompotitionAPI必须添加这条.
    	locale: 'zh-CN', // 首选语言
    	fallbackLocale: "en-US", // 备选语言
  })
  
  app.use(i18n);
  app.mount('#app');
  

  引入i18n有一个warning

  vue.js - You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with - Stack Overflow.

• 博客编写于2022年2月4日

暂时无法使用 <script setup> 写法

局部 - 只作用于当前组件

// HelloWorld组件
<<template>
  <div class="hello-world">
    <!-- t是从执行useI18n函数的解构得到函数, hello是自己定义的变量 -->
    <p>{{ t("hello") }}</p>
    <p>{{ t("home.title") }}</p>
    <p>{{ hello }}</p>
  </div>
</template>

<script>
import { computed } from "vue";
import { useI18n } from "vue-i18n/index"; //导入并使用

export default {
  setup() {
    const { t } = useI18n({
      // 传入messages对象, 里面分别是需要被安排的文字. "zh-CN" - 中文, "en-US" - 英文, 两个对象的key必须完全一致.
      messages: {
        "zh-CN": {
          hello: "你好,世界",
          home: {
            title: "欢迎来到地球",
          },
        },
        "en-US": {
          hello: "hello, world",
          home: {
            title: "Welcome to the Earth",
          },
        },
      },
    });

    // t是一个函数,能在mustache(模板语法)中使用,当然也能在setup函数任何地方使用
    const hello = computed(() => t("hello"));

    return {
      t,
      hello,
    };
  },
};
</script>

<style scoped>
</style>

<p>{{ t("hello") }}</p>
<p>{{ t("home.title") }}</p>
<p>{{ hello }}</p>

<p>你好, 世界</p>
<p>欢迎来到地球</p>
<p>你好, 世界</p>

全局 - 所有组件都能使用

1. 给useI18n函数传入useScope: "global" 后再传入的messages即是全局变量.

// App.vue组件
// 当然也可以是其他任何组件, 写在这里符合vue的 单向数据流 原则, 包括切换语言按钮.
<template>
  <HelloWorld />
  <HelloChina></HelloChina>

  <!-- 给用户提供切换语言按钮 -->
  <button @click="changeLang">中/English</button>
  <!-- 如果需要多语言切换 -->
  <select v-model="locale">
    <option value="zh-CN">简体中文</option>
    <option value="en-US">English</option>
  </select>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import HelloChina from "./components/HelloChina.vue";

import { useI18n } from "vue-i18n/index";

export default {
  name: "App",
  components: {
    HelloWorld,
    HelloChina,
  },
  setup(props) {
    const { locale } = useI18n({
      useScope: "global",
      messages: {
        "zh-CN": {
          hello2: "你好,我是全局变量",
        },
        "en-US": {
          hello2: "hello, I'm global variable",
        },
      },
    });

    // 点击切换
    const changeLang = () => {
      locale.value = "en-US"; // 在定义全局变量时执行useI18n时会返回一个locale, 改变其即改变全局语言设置.
    };

    return {
      locale,
      changeLang
    };
  },
};
</script>

<style>
</style>

? 2. createI18n时加上globalInjection: true

// main.js
const i18n = createI18n({
  legacy: false,
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  globalInjection: true, // 加上这一句 
  // 将其设为true,则所有前缀为$的属性和方法(只是vue-i18n所携带的)将被注入到所有vue组件中.
  // 即在所有组件中都可以使用 $i18n $t $rt $d $n $tm
})

app.use(i18n);
app.mount('#app');

3. 使用全局变量 hello2

<template>
  <div class="hello-world">
    <p>{{ t("hello") }}</p>
    <p>{{ t("home.title") }}</p>
    <p>{{ hello }}</p>
    <!-- 注意这里使用的是$t(现在是全局方法,无需导出) -->
    <p>{{ $t("hello2") }}</p>
  </div>
</template>

<p>你好,我是全局变量</p>

给用户提供切换语言选项

• 在定义全局变量时执行useI18n时会返回一个locale, 改变其即改变全局语言设置.

代码即上面App.vue组件的代码

常见语法

简单演示常见语法, 使用细节及高级用法请参照官方文档.

Message Format Syntax | Vue I18n (intlify.dev)

文本本地化

具名插值

类似定义一个形参, 使用时可以传入参数.

"zh-CN": {
 name: "你好,我是{uname}",
}

<p>{{ t("name", { uname: "番茄" }) }}</p>

<p>你好,我是番茄</p>

列表插值

"zh-CN": {
 skill: "我会{0}, {1}, {2}",
}

<p>{{ t("skill", ["html", "css", "javascript"]) }}</p>

<p>我会html, css, javascript</p>

占位文字插值

在i18n的语法中, 在两个变量之间插入占位字符必须使用 { ’ ’ }包裹, 否则无法编译.

  "en-US": {
    address: "{account}{'@'}{domain}"
  }

<p>email: {{ $t('address', { account: 'foo', domain: 'domain.com' }) }}</p>

<p>email: foo@domain.com</p>

文本链接

使用@:可以引用其他变量

"zh-CN": {
  firstName: "Taylor",
  lastName: "Swift",
  fullName: "@:firstName @:lastName !!!",
}

<p>{{ t("fullName") }}</p>

<p>Taylor Swift !!!</p>

修饰符 - 内置

类似vue的事件触发修饰符

"zh-CN": {
          tomato: "tomato",
          capital: "@.upper:tomato",
}

<p>{{ t("capital") }}</p>

<p>TOMATO</p>

自定义修饰符

在createI18n时就需将自定义修饰符定义好

const i18n = createI18n({
  locale: 'en-US',
  messages: {
    // set somethinig locale messages ...
  },
  // set custom modifiers at `modifiers` option
  modifiers: {
    snakeCase: (str) => str.split(' ').join('_')
  }
})

复数本地化

最常见的英语中的复数

"en-US": {
  car: "car | cars",
  apple: "no apples | one apple | {count} apples",
},

<p>{{ t("car", 1) }}</p>
<p>{{ t("car", 2) }}</p>
<p>{{ t("apple", 0) }}</p>
<p>{{ t("apple", 1) }}</p>
<p>{{ t("apple", 2) }}</p>

<p>car</p>
<p>cars</p>

<p>no apples</p>
<p>one apple</p>
<p>2 apples</p>

日期本地化

1. 多传入一个datetimeFormats对象
2. 导出d函数
3. datetimeFormats中的可选参数 ECMAScript? 2022 Internationalization API Specification (tc39.es)

setup() {
    const { t, d } = useI18n({
      messages: {
        'en-US': {
          current: 'Current Datetime'
        }
      },
     // 多传入一个datetimeFormats对象
     datetimeFormats: {
        "zh-CN": {
          // 定义需要使用的格式
          // short 只显示年月日
          short: {
            year: "numeric",
            month: "short",
            day: "numeric",
          },
          // long 显示年月日时分秒星期
          long: {
            year: "numeric", // numeric: 以数字的形式显示(一位数字就显示一个数字)
            month: "short", // short:  简写. 例如英文February - Feb. 相对的可以将其设置为 long
            day: "numeric", 
            weekday: "short",
            hour: "numeric",
            minute: "2-digit", //2-digit: 只有一位数字时自动在前面补上 0 
            second: "2-digit",
            hour12: true, // 是否使用24小时制. false | true
          },
        },
        "en-US": {
          short: {
            year: "numeric",
            month: "2-digit",
            day: "numeric",
          },
          long: {
            year: "numeric",
            month: "short",
            day: "2-digit",
            weekday: "long",
            hour: "numeric",
            minute: "2-digit",
            second: "2-digit",
            hour12: true,
          },
        },
      },
    })
    
    return {
      t,
      d,
    };
  }

<!-- 给d函数传入一个Date实例再选择使用哪种方式展示 -->
<p>{{ d(new Date(), "short") }}</p>
<p>{{ d(new Date(), "long") }}</p>

<p>2022年2月5日</p>
<p>2022年2月5日周六 下午7:39:11</p>
<!-- and "en-US" -->
<p>02/5/2022</p>
<p>Saturday, Feb 05, 2022, 7:39:39 PM</p>

数字本地化

不同国家货币符号的不同、小数转百分比等数字的本地化

• 这次导出的是 n函数, 其他与日期本地化大同小异.
• 数字格式化可选参数 ECMAScript? 2022 Internationalization API Specification (tc39.es)

setup() {
    const { t, n } = useI18n({
      messages: {
        'en-US': {
          current: 'Current Datetime'
        }
      },
     // 多传入一个numberFormats对象
     numberFormats: {
        "zh-CN": {
          currency: {
            // 这个对象是货币的本地化
            style: "currency",
            // 人民币(元 ￥)
            currency: "CNY",
            // 是否使用 数字三位分节法 即100，000，00
            useGrouping: true,
            // 以什么方式展示货币符号。
            // code: CNY 100; symbol: ￥1000; name: 100人民币;
            currencyDisplay: "symbol",
            // 数字标记法: 标准、科学计数法、工程计数法、。。。
            // standard: ￥987,654,321.00; scientific: ￥9.88E8; engineering: ￥987.65E6; compact: ￥9.9亿;
            notation: "standard",
          },
          percent: {
            // 百分比本地化. 将数字用百分比形式展示。
            style: "percent",
            useGrouping: false,
            // 转化后保留多少位小数
            minimumFractionDigits: 2,
          },
          decimal: {
            // 十进制本地化
            style: "decimal",
            minimumSignificantDigits: 3,
            maximumSignificantDigits: 5,
          },
        },
        "en-US": {
          currency: {
            style: "currency",
            currency: "USD",
            notation: "standard",
          },
          decimal: {
            style: "decimal",
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          },
          percent: {
            style: "percent",
            useGrouping: false,
          },
        },
      },
    })
    
    return {
      t,
      n
    };
  }

<p>{{ n(10000, "currency") }}</p>
<p>{{ n(10000, "currency", "en-US") }}</p>
<p>{{ n(10000, "currency", "zh-CN", { useGrouping: false }) }}</p>
<p>{{ n(987654321, "currency", { notation: "compact" }) }}</p>
<p>{{ n(0.99123, "percent") }}</p>
<p>{{ n(0.99123, "percent", { minimumFractionDigits: 3 }) }}</p>
<p>{{ n(12.11612345, "decimal") }}</p>
<p>{{ n(12145281111, "decimal", "en-US") }}</p>

<p>￥10,000.00</p>
<p>$10,000.00</p>
<p>￥10000.00</p>
<p>￥9.9亿</p>
<p>99.12%</p>
<p>99.123%</p>
<p>12.116</p>
<p>12,145,281,111.00</p>

每个组件都要导入useI18n

补充一个简易hook, 来减少编写重复代码 (打个样). 从此导入这个hook即可.

import { useI18n } from "vue-i18n/index"; //导入使用

// 传入一个数组
/*  
[
  ['相同的key', 'value1', 'value2'],
  ['相同的key', 'value1', 'value2'],
  ['相同的key', 'value1', 'value2'],
]
 */
export default function useI18nHook(arr) {
  const messages = { 'zh-CN': {}, 'en-US': {} };

  arr.forEach(item => {
    messages['zh-CN'][item[0]] = item[1];
    messages['en-US'][item[0]] = item[2];
  });
  return useI18n({
    messages,
    // 比较固定的格式化配置对象也能放进来
    datetimeFormats: { 
      "zh-CN": {
        short: {
          year: "numeric",
          month: "short",
          day: "numeric",
        },
        long: {
          year: "numeric",
          month: "short",
          day: "numeric",
          weekday: "short",
          hour: "numeric",
          minute: "2-digit",
          second: "2-digit",
          hour12: true,
        },
      },
      "en-US": {
        short: {
          year: "numeric",
          month: "2-digit",
          day: "numeric",
        },
        long: {
          year: "numeric",
          month: "short",
          day: "2-digit",
          weekday: "long",
          hour: "numeric",
          minute: "2-digit",
          second: "2-digit",
          hour12: true,
        },
      },
    },
  });
}

// 组件中使用
<script>
import useI18nHook from "@/hooks/useI18nHook.js";
export default {
  setup() {
    const { t } = useI18nHook([
      ["hello", "你好, 世界", "hello, China"],
      ["uname", "威廉", "William"],
    ]);

    return {
      t,
    };
  },
};
</script>