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>
相关推荐
IT_陈寒21 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿22 分钟前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js