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

参考链接

相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron