vue使用i18n实现国际化

  1. 安装

    npm install vue-i18n@next

  2. 在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
});
  1. 在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) });
  1. 在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>
相关推荐
小墨宝20 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED35 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿39 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子40 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架