【前端开发】国际化开发工具i18n的使用教程

场景

让项目能够适应多国语言根据系统语言环境展示不同语种,以vue项目为例子

步骤

1. i18n安装
bash 复制代码
npm install --save vue-i18n #默认安装最新版本
npm install --save vue-i18n@8.27.1  #指定版本
2. 语言文件添加

添加一个文件夹 /lang (文件名可以自己随意取)用以放相关配置文件

1.语言对应文件

在lang文件夹下新建 zh.json, en.json等json文件以键值对形式存放字段对应的语言文本。

zh.json:

json 复制代码
{
    "homePage": {
        "about": "关于"
    }
}

en.json:

json 复制代码
{
    "homePage": {
        "about": "about"
    }
}

新建一个配置文件index.js:

javascript 复制代码
import Vue from 'vue'
import Element from 'element-ui'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import en from './en.json'
import zh from './zh.json'

const messages = {
    en: {
        ...en,
        ...enLocale
    },
    zh: {
        ...zh,
        ...zhLocale
    }
}
let lang = localStorage.getItem('lang')
let locale = lang === 'en_US' ? 'en' : 'zh'

Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: locale, // 设置默认语言
    messages,
    silentTranslationWarn: true
})

Vue.use(Element, {
    i18n:(key,val)=>i18n.t(key,val)
})

export default i18n
3. 在入口文件(main.js)和全局组件文件(App.vue)中配置

main.js:

javascript 复制代码
import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './lang' // 导入
Vue.config.productionTip = false

Vue.use(Element)
new Vue({
  render: h => h(App),
  i18n // 注册
}).$mount('#app')

App.vue:

每次挂载都获取一下系统语言,以防语言切换后缓存刷新不及时

javascript 复制代码
 mounted() {
    let lang = localStorage.getItem('lang')
    if (lang == 'en_US') {
      this.$i18n.locale = "en"
    } else {
      this.$i18n.locale = "zh"
      this.locale = null
    }
  }
4. 代码中使用

在代码中展示文本的位置以{``{$t('')}}的格式替换文本

javascript 复制代码
<el-menu-item index="3">{{ $t('homePage.about') }}</el-menu-item>

参考链接

相关推荐
xw54 分钟前
移动端调试上篇
前端
伍哥的传说7 分钟前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达7 分钟前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing13 分钟前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy18 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码38 分钟前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_92 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆3 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
脑子慢且灵3 小时前
【JavaWeb】一个简单的Web浏览服务程序
java·前端·后端·servlet·tomcat·web·javaee