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

参考链接

相关推荐
IT_陈寒3 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel9 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu14 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript