vue使用i18n实现国际化

皮卡穆2024-01-15 20:11

安装

npm install vue-i18n@next
在src下创建一个名为i18n的文件夹,并按照下图创建需要的文件
- i18n/locales/en.json

json 复制代码

{
  "common": {
    "BUTTON_OK": "OK",
    "BUTTON_CANCEL": "Cancel",
    "BUTTON_SUBMIT": "Submit",
    "BUTTON_SEARCH": "Search",
    "BUTTON_RESET": "Reset"
  },
  "home": {
    "TODAY": "Today",
    "THIS_WEEK": "This Week",
    "THIS_MONTH": "This Month",
    "DEVICE_UNIT": "Unit",
    "LAST_MONTH": "Last Month"
  }
}

i18n/locales/zh-CN.json

json 复制代码

{
  "common": {
    "BUTTON_OK": "确认",
    "BUTTON_CANCEL": "取消",
    "BUTTON_SUBMIT": "提交",
    "BUTTON_SEARCH": "搜索",
    "BUTTON_RESET": "重置"
  },
  "home": {
    "TODAY": "本日",
    "THIS_WEEK": "本周",
    "THIS_MONTH": "本月",
    "DEVICE_UNIT": "台",
    "LAST_MONTH": "上月"
  }
}

i18n/index.js

js 复制代码

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context(
    "./locales",
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );
  const messages = {};
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = {
        ...locales(key),
        ...require(`element-ui/lib/locale/lang/${locale}`)
      };
    }
  });
  return messages;
}

export default new VueI18n({
  locale: "zh-CN",
  fallbackLocale: "zh-CN",
  messages: loadLocaleMessages(),
  silentTranslationWarn: true
});

在main.js引入

js 复制代码

import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) });

在vue文件中使用
- 如果在某个页面特有的文本，直接在页面写

vue 复制代码

<i18n>
{
  "zh-CN": {    
    "DATE": "日期", 
  },
  "en": {
     "DATE": "Date", 
  }
} 
</i18n>

具体如下

vue 复制代码

<template>
  <div class="box">
    <div class="modelTitle">
        <span style="margin-left:16px;color: #ffffff;">{{
          $t(`DATE`)
        }}</span>
        <span>{{$t(`common.BUTTON_MORE`)}}</span>
      </div>
      
    
  </div>
</template>

<i18n>
{
  "zh-CN": {    
    "DATE": "日期", 
  },
  "en": {
     "DATE": "Date", 
  }
} 
</i18n>