// 创建 VueI18n 实例,并为 messages 和 locale 属性赋值 const i18n = new VueI18n({ messages, locale: lang.substr(0, 2) }); // element国际化动态切换 locale.i18n((key, value) => i18n.t(key, value)); // 导出 export default i18n; vue3中: import { createI18n } from 'vue-i18n'; ...
一、集成vue-i18n 1、安装依赖 npm i vue-i18n -S 2、配置vue-i18n 在src目录下创建i18n目录用于保存和语言切换相关的内容 在i18n目录下创建lang目录用于保存不同语言的映射关系,如中文对应zh.js、英文对应en.js等 在i18n目录下创建index.js作为默认导出,并在其中创建i18n对象 //index.jsimport { createI18n }...
一、 引入 安装i18n npm installvue-i18n--save 在全局环境引入i18n,项目中main.js中引入 在这里插入图片描述 在这里插入图片描述 语言状态放在了localhost中 在这里插入图片描述 二、 切换中英文 更改this.$i18n.locale的值; 在这里插入图片描述 在这里插入图片描述 三、 页面使用 配置wangwu-zh.json和wangwu-en....
// 为 Vue 的根实例设置语言环境信息// 通过选项创建 VueI18n 实例consti18n =newVueI18n({//基本常见,多语言网页,使用this.$i18n.locale="zh";可以修改对应的语言模式,其处理一般放在一个lang文件下//封装处理多个语言, 大小写均可,这就是messages对象里面的keylocale:'CN',// 首选语言缺少翻译时要使用的语...
Vue3+Ts i18n实现国际化 1、下载 依赖 npm install vue-i18n@nex 2、在src目录下创建文件夹 创建文件 index.ts 、 zh/index.ts 、en/index.ts // index.ts import { createI18n } from 'vue-i18n' import zh from './zh/index' import en from './en/index'...
1、安装 i18n 模块 vue-i18n与vue存在版本兼容性问题,vue2.x需要使用 8.9.0以下版本的vue-i18n,我们这里用的vue 2.6.10,配合vue-i18n 8.2.1版本使用 安装vue-i18n npm install vue-i18n@8.2.1 --save 2、在src下创建lang目录及对应语言目录 3、配置src/lang/index.js ...
// 在 Vue 的原型中挂载 $t 方法,这是我们为什么能够直接在模板中使用的原因// 把 VueI18n 对象实例的方法都注入到 Vue 实例上Vue.prototype.$t=function(key:Path,...values:any):TranslateResult{consti18n=this.$i18n// 代理模式的使用returni18n._t(key,i18n.locale,i18n._getMessages(),this,...value...
npm install vue-i18n@next 这里安装的是vue-i18n的next版本,以支持 Vue 3。 三、创建语言文件 在项目中创建一个专门的文件夹来存放语言文件,例如src/locales。在这个文件夹中,创建不同语言的文件,比如en.json(英语)、zh-CN.json(中文简体)等。 以下是一个简单的英文语言文件en.json的示例: ...
安装依赖 yarn add vue-i18n@next yarn add vue-i18n@9.2.2 # or npm install vue-i18n@next 目录配置 注 语言翻译文档文件可以放在大多数位置,此处放在language文件夹下。 当然也可以在对应模块的文件夹下新建一个文件夹如l
做到这里,按理说,Element-Plus已经可以根据我们的选择切换中英文了,但是现阶段Element-Plus还未完成vue-i18n进行联动的相关处理,所以需要我们自定义处理。 自定义语言包国际化处理 将自定义语言包导入@/i18n目录下: 其中,一个为中文语言包zh.js,一个为英文语言包en.js, ...