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 importVuefrom'vue'importVueI18nfrom...
"vue-i18n":"^8.11.2" 下面为兼容vue-i18n@6.x+及更高版本的配置介绍。 2、在src资源文件下创建文件夹i18n,i18n下创建index.js文件,引入VueI18N,配置i18n,并导入语言包(根据开发需求添加语言) importVuefrom"vue";import{ getBrowserLang, getCookieLang }from"@utils/storage";//引入vue-i18nimportVueI18nf...
export function loadLanguageAsync(lang: LangType) { return import(/* webpackChunkName: "lang-request" */`../lang/${lang}.json`).then((langfile) => { // 动态加载对应的语言包 i18n.global.setLocaleMessage(lang, langfile); return setI18nLanguage(lang); // 返回并且设置 }); } changLang...
vue3 中使用 i18n 需要安装的是 [vue-i18n v9] 的版本 npm install vue-i18n@9 创建src\lang\index.ts,使用 createI18n 创建i18n 实例: 代码语言:javascript 复制 // src\lang\index.ts import { createI18n } from 'vue-i18n' import { LANG_VALUE } from '@/common/enum' import ch from './ch'...
由于项目中使用了Element UI组件库,它里面内置的一些文字也是需要国际化,好在Element UI是有国际化的支持。但是Element UI默认只兼容vue-i18n的5.x版本,而现在vue-i18n的版本已经到了7.x,Element UI官方文档中“国际化”一节中对此有具体说明。下面将手动设置内容贴出来: ...
npm install vue-i18n@next 或 yarn add vue-i18n@next 2、在src下⾯创建⼀个名为language的⽂件名，并在⽂件下⾯创建zh、enjs⽂件（中⽂、英⽂），本⽂只做中英⽂切换作为案例，后续可加更多版本 3、然后在四个js⽂件中写⼊对应的⽅法，这⾥⾯存放的是我们要进⾏切换的语⾔...
支持Vue.js 2.x以上版本 安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1、在 main.js 中引入 vue-i18n (前提是要先引入 vue) importVueI18nfrom'vue-i18n'Vue.use(VueI18n) 2、准备本地的翻译信息 constmessages={zh:{message:{hello:'好好学习,天天向上!'}},en:{message:{hello:'goo...
要使vue-i18n与Vue 3一起工作,需要进行以下步骤: 1. 安装vue-i18n和Vue 3:使用npm或yarn安装vue-i18n和Vue 3的最新版本。 2. 创建Vue 3应用程序...
在main.js 中的代码中,可以看到,当 locale 的值为‘zh-CN’时,版本为中文;当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en,这个不固定,只需要对应上。 好了,现在来看一下,我组件中的一个点击事件中如何进行切换。 /*** 切换语言*/changeLangEvent(){this.$confirm('确定切换语言吗...
维护多个版本的语言文件 语言包这边是这么处理的,项目下新增一个目录languages --languages --lib -- cn.js // 中文语言包 -- us.js // 英文语言包 -- .. // 其他语言,暂未实践 -- index.js // 导出语言包复制代码 cn.js export default { common: { message: '消息' }, xxx: { } } 复制代...