【前端开发】国际化开发工具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>

参考链接

相关推荐
向葭奔赴♡22 分钟前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo27 分钟前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel33 分钟前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld35 分钟前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel40 分钟前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi2 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904272 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki3 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo3 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端
码界奇点3 小时前
Spring Web MVC构建现代Java Web应用的基石
java·前端·spring·设计规范