宁波做网站优化,网站专题页怎么做,sem广告,Wordpress微博样式1、国际化介绍 国际化#xff08;Internationalization#xff0c;通常缩写为i18n#xff09;是指设计和开发软件应用程序#xff0c;使其能够轻松地适应不同的语言、文化和地区的需求。国际化不仅仅涉及将文字翻译成其他语言#xff0c;还包括调整日期、时间…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.jsonEnglish(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.jsonconst 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 languagelang中文?zh_CN:langEnglish?en_US:es_USi18n.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 typelangType中文?zh_CN:langTypeEnglish?en_US:es_USthis.$getLang(langType ? langType : 中文)}, 6、在组件中使用
html文件中使用 // 没有使用国际化语言之前el-button classbuttons stylewidth:100%; typeprimary clicksubmitLongin登录/el-button//使用国际化语言之后el-button classbuttons stylewidth:100%; typeprimary clicksubmitLongin{{ $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 classlanguagediv v-for(item, index) in languageList :keyindex :classlangIndexindex?language-item:language-item2 language-item clickchangeLanguage(index)img classicon src../../assets/language/china.png altchina v-ifindex0/img classicon src../../assets/language/MG.png altchina v-ifindex1/img classicon src../../assets/language/MXG.png altchina v-ifindex2/span classtext{{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
