vue项目中 i18n（vue-i18n）国际化解决方案,从安装到使用

可爱的秋秋啊

已于 2024-07-09 10:58:56 修改

阅读量2.9k

点赞数 22

分类专栏： vue 文章标签： vue.js javascript 前端 i18n

于 2024-07-05 09:36:11 首次发布

本文链接：https://blog.csdn.net/mq1314520_zhl/article/details/140197730

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、国际化介绍

国际化（Internationalization，通常缩写为"i18n"）是指设计和开发软件应用程序，使其能够轻松地适应不同的语言、文化和地区的需求。国际化不仅仅涉及将文字翻译成其他语言，还包括调整日期、时间、货币格式，以及考虑不同文化中的布局、颜色和图标等因素。通过国际化，开发人员可以使其应用程序更易于被全球用户理解和接受，从而扩大应用程序的市场和影响力。使用的基本思路定义如下：

定义语言包：需要几种语言展示，就定义几个语言包
创建对象，对语言包进行整合，对象的 key 为语言包的引用，值为语言包对象
创建 vue-i18n 类的对象，同时为其 messages 属性为第二步创建的对象，为其 locale 属性赋值为第二步中语言对象对应的 key
再创建 Vue 实例对象时，挂载 vue-i18n 类的对象
第三方库的国际化配置，如 element组件库

2、插件的试用版本介绍

vue-i18n 作为国际化插件，它主要有两个版本：v8 和 v9。v8 版本适用于 Vue2 框架，v9 版本适用于 Vue3 框架。具体区别可以查看官网，以下内容均在 Vue3 中使用。

3、在vue项目安装并组合语言包

安装插件 vue-i18n

可以使用 npm 或 yarn 进行安装：

// npm 安装
npm install vue-i18n

// 或者

// yarn 安装

yarn add vue-i18n

定义和组合语言包

在项目中首先创建语言包文件夹i18n，在下面创建一个lang.js文件和存放需要的语言包；例如创建zh.json和en.json两个语言，键名是自定义的，中英文是的一样的，需要几种语言就定义几个对象，后面会在组件中使用。先定义常用的语言包，列如常用的两个语言包：中文（zh.json）English(en.json)。(如图，图中显示的是三个语言)

常用语言包的定义如下见代码

中文：zh_cn.json

{
  "auto": "系统",
  "calendar": {
    "cancel": "取消",
    "confirm": "确定",
    "empty": "清空",
    "sevenDaysAgo": "近七天",
    "submit": "提交",
    "thirtyDaysAgo": "近三十天",
    "threeDaysAgo": "近三天",
    "login": "登录"
  }
}

英文：en_cn.json

{
  "auto": "System",
  "calendar": {
    "cancel": "Cancel",
    "confirm": "OK",
    "empty": "Clear",
    "sevenDaysAgo": "近七天",
    "submit": "Submit",
    "thirtyDaysAgo": "Last 30 days",
    "threeDaysAgo": "Nearly three days",
    "login": "Login"
  }
}

注意：在语言环境定义中，我们使用的是key:value的形式，两个语言文件里面的key必须保持一致

引入插件并创建 i18n 实例，组合语言包对象：

在当前文件夹中的index.js文件中将我们的语言包对象组合并后续使用

import { createI18n } from 'vue-i18n'
import ZH from './zh_CN.json'
import EN from './en_US.json'
import ES from './es_US.json'

const messages = {
  zh_CN: { ...ZH },
  en_US: { ...EN },
  es_US: { ...ES }
}

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale:'',
  messages
})

/**
 * 可以是请求后台接口获取语言包或者本地的(......为自定义逻辑)
 * @param type
 * @returns {Promise}
 */
const getLang=(lang)=>{
  // 将选择的语言存储vuex
  localStorage.setItem('lang', lang)
  // 转换语言类型并赋值i18n,按照自己页面定义的值转换为想要的数据
  let language=lang=='中文'?'zh_CN':lang=='English'?'en_US':'es_US'
 
  i18n.global.locale.value = language; 

   // 如果调用后端接口请自己写逻辑
   ......
   i18n.global.locale.value = language; 
}



// 导出getLang
export  {getLang}
export default i18n

注意：在创建实例时，一定要将 legacy 属性设置为 false，因为 legacy 默认为 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要将此属性手动设置为 false。

4、将i18n文件挂载到实例对象

在项目的主文件：main.js 中引入并挂载到app实例文件中

import { createApp } from 'vue'
//引入语言包文件
import i18n from './i18n/index'
import {getLang} from '@/i18n/index'

// 创建app实例并挂载
const app = createApp(App)
 .use(i18n)

// 全局挂载语言改变函数
app.config.globalProperties.$getLang = getLang

app.mount('#app')

5、在App.vue中判断当前语言

 created(){
    let langType = localStorage.getItem('lang')
    // let type=langType=='中文'?'zh_CN':langType=='English'?'en_US':'es_US'
    this.$getLang(langType ? langType : '中文')
   
  },

6、在组件中使用：

html文件中使用

// 没有使用国际化语言之前
 <el-button class="buttons" style="width:100%;" type="primary" @click="submitLongin">
  登录
 </el-button>

//使用国际化语言之后
 <el-button class="buttons" style="width:100%;" type="primary" @click="submitLongin">
   {{ $t('calendar.login') }}
 </el-button>

js或者ts文件中使用

// js文件中没有使用国际化之前
// 如：提示信息的国际化
 if (ruleForm.name.length == 0 || ruleForm.pass.length == 0) {
      ElMessage.error('请正确输入用户名或者密码')
      return
 } 


//js文件中使用国际化之后
//首先在js引入中语言包并定义js使用的变量

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

//具体使用
 if (ruleForm.name.length == 0 || ruleForm.pass.length == 0) {
      ElMessage.error(t('message.pleaseUserOrPassword')
      return
 }

画面上规划切换语言切换的文字或者按钮或者图标

点击执行语言切换：想要切换语言时，修改 locale 属性就可以了。（我这里是登录画面切换的）

//html 
<!-- 多语言 -->
<div class="language">
   <div  v-for="(item, index) in languageList" :key="index" :class="langIndex==index?'language-item':'language-item2 language-item'" @click="changeLanguage(index)">
     <img class="icon" src="../../assets/language/china.png" alt="china" v-if="index==0"/>
     <img class="icon" src="../../assets/language/MG.png" alt="china" v-if="index==1"/>
     <img class="icon" src="../../assets/language/MXG.png" alt="china" v-if="index==2"/>
     <span class="text">{{item}}</span>
   </div>
</div>


// js中引入

import {getLang} from '@/i18n/index'

// 定义多语言
const langIndex = ref() // 当前选择的语言
let langTypes = ["中文", "English", "español"] 
let languageList = computed(() => {
    return ["中文", "English", "español"]
})


// 多语言切换
const changeLanguage = (index) => {
    langIndex.value = index
    // localStorage.setItem('langIndex',langIndex)
    let type = langTypes[index];
    getLang(type)  // 调用全局方法改变语言
}

可以参考文档：安装 | Vue I18n