快捷導(dǎo)航

從安裝到使用詳解vue項目中i18n(vue-i18n)實現(xiàn)國際化的完整指南

更新時間：2025年10月11日 09:07:47 作者：可愛的秋秋啊

國際化Internationalization,通?？s寫為i18n,是指設(shè)計和開發(fā)軟件應(yīng)用程序,使其能夠輕松地適應(yīng)不同的語言,下面小編就將從安裝到使用為大家進行詳細介紹

1、國際化介紹

國際化（Internationalization，通常縮寫為"i18n"）是指設(shè)計和開發(fā)軟件應(yīng)用程序，使其能夠輕松地適應(yīng)不同的語言、文化和地區(qū)的需求。國際化不僅僅涉及將文字翻譯成其他語言，還包括調(diào)整日期、時間、貨幣格式，以及考慮不同文化中的布局、顏色和圖標等因素。通過國際化，開發(fā)人員可以使其應(yīng)用程序更易于被全球用戶理解和接受，從而擴大應(yīng)用程序的市場和影響力。使用的基本思路定義如下：

定義語言包：需要幾種語言展示，就定義幾個語言包
創(chuàng)建對象，對語言包進行整合，對象的 key 為語言包的引用，值為語言包對象
創(chuàng)建 vue-i18n 類的對象，同時為其 messages 屬性為第二步創(chuàng)建的對象，為其 locale 屬性賦值為第二步中語言對象對應(yīng)的 key
再創(chuàng)建 Vue 實例對象時，掛載 vue-i18n 類的對象
第三方庫的國際化配置，如 element組件庫

2、插件的試用版本介紹

vue-i18n 作為國際化插件，它主要有兩個版本：v8 和 v9。v8 版本適用于 Vue2 框架，v9 版本適用于 Vue3 框架。具體區(qū)別可以查看官網(wǎng) ，以下內(nèi)容均在 Vue3 中使用。

3、在vue項目安裝并組合語言包

安裝插件 vue-i18n

可以使用 npm 或 yarn 進行安裝：

// npm 安裝
npm install vue-i18n

// 或者

// yarn 安裝

yarn add vue-i18n

定義和組合語言包

在項目中首先創(chuàng)建語言包文件夾i18n，在下面創(chuàng)建一個lang.js文件和存放需要的語言包；例如創(chuàng)建zh.json和en.json兩個語言，鍵名是自定義的，中英文是的一樣的，需要幾種語言就定義幾個對象，后面會在組件中使用。先定義常用的語言包，列如常用的兩個語言包：中文（zh.json）English(en.json)。(如圖，圖中顯示的是三個語言)

常用語言包的定義如下見代碼

中文：zh_cn.json

{
  "auto": "系統(tǒng)",
  "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"
  }
}

注意：在語言環(huán)境定義中，我們使用的是key:value的形式，兩個語言文件里面的key必須保持一致

引入插件并創(chuàng)建 i18n 實例，組合語言包對象：

在當前文件夾中的index.js文件中將我們的語言包對象組合并后續(xù)使用

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)
  // 轉(zhuǎn)換語言類型并賦值i18n,按照自己頁面定義的值轉(zhuǎn)換為想要的數(shù)據(jù)
  let language=lang=='中文'?'zh_CN':lang=='English'?'en_US':'es_US'
 
  i18n.global.locale.value = language; 

   // 如果調(diào)用后端接口請自己寫邏輯
   ......
   i18n.global.locale.value = language; 
}



// 導(dǎo)出getLang
export  {getLang}
export default i18n

注意：在創(chuàng)建實例時，一定要將 legacy 屬性設(shè)置為 false，因為 legacy 默認為 true，它支持使用 Vue2 框架中的 Options API，如果要在 Vue3 更好的使用 Composition API 模式，那么就需要將此屬性手動設(shè)置為 false。

4、將i18n文件掛載到實例對象

在項目的主文件：main.js 中引入并掛載到app實例文件中

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

// 創(chuàng)建app實例并掛載
const app = createApp(App)
 .use(i18n)

// 全局掛載語言改變函數(shù)
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
 }

畫面上規(guī)劃切換語言切換的文字或者按鈕或者圖標

點擊執(zhí)行語言切換：想要切換語言時，修改 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)  // 調(diào)用全局方法改變語言
}

到此這篇關(guān)于從安裝到使用詳解vue項目中i18n(vue-i18n)實現(xiàn)國際化的完整指南的文章就介紹到這了,更多相關(guān)vue i18n國際化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: