首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue i18n国际化

从安装到使用详解vue项目中i18n(vue-i18n)实现国际化的完整指南

2025-10-11 09:07:48 作者：可爱的秋秋啊

国际化Internationalization,通常缩写为i18n,是指设计和开发软件应用程序,使其能够轻松地适应不同的语言,下面小编就将从安装到使用为大家进行详细介绍

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 属性就可以了。（我这里是登录画面切换的）

 <!-- 多语言 -->
<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(vue-i18n)实现国际化的完整指南的文章就介绍到这了,更多相关vue i18n国际化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！