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

// npm 安装
npm install vue-i18n

// 或者

// yarn 安装

yarn add vue-i18n

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

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

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

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')

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

// 没有使用国际化语言之前
 <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文件中没有使用国际化之前
// 如：提示信息的国际化
 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
 } 

 <!-- 多语言 -->
<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)  // 调用全局方法改变语言
}