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)=>{// 将选择的语言存储vuexlocalStorage.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 = getLangapp.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
