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

JAMJAM_NoName2024-08-29 16:50

场景

让项目能够适应多国语言根据系统语言环境展示不同语种，以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>

参考链接