创建一个i18n实例,并在Vue实例中配置它: javascript const i18n = new VueI18n({ locale: localStorage.getItem('locale') || 'en', // 设置默认语言 messages: { en: { welcome: 'Welcome', // 其他英文翻译 }, zh: { welcome: '欢迎', // 其他中文翻译 } } }); new Vue({ i18n, render: h...
第一步:vue项目下新建locals文件夹,里面配置index.js内容如下,同时新建zh.js 和 en.js作为语言配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 importVue from'vue' importVueI18n from'vue-i18n' importElementLocal from'element-ui/lib/locale' importenLocale from'elem...
vue2 中使用 的版本是 "vue-i18n": "^8.27.0", 至于哪些版本可以在vue3和vue2中使用,没有深究,有兴趣的可以自己探索 1.就是下载 npm i vue-i18n@8.27.0 -D 2.就是和上面一样建文件,不在赘述 3.在i18n.js文件使用 //i18n-setup.jsimport Vue from 'vue'import VueI18n from'vue-i18n'import en...
npm install vue-i18n@8.2.1 配置 新建i18n模块和对应的语言文件 importVuefrom"vue";importVueI18nfrom"vue-i18n";importzhfrom"element-ui/lib/locale/lang/zh-CN";// element-ui的中文包importrufrom"element-ui/lib/locale/lang/ru-RU";// element-ui的俄语包import{ getLanguage, DEFAULT_LANGUAGE }from...
通过源码进一步得知this.$i18n在内部通过this._i18n获取国际化对象,所以直接将i18n赋值给_i18n, 此处暂时可解决antv x6自定义vue节点无法国际化问题 特别注意:此处使用了vue-i18n包的内部变量_i18n,防止升级i18n后废弃该变量导致问题 */ Vue.prototype._i18n = i18n;Sign...
vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage 但是本文还是详细说一遍: 为什么需要异步加载语言包 主要还是缩小提代码包,没有按需加载前,语言包内容太多 好几屏幕全部是,虽然从webpack-analysis 看图里面占比可以忽略不计 ...
export default i18n; 注意:globalInjection 为true 使用注意事项: 在vue模板()中与 defineComponent render 函数中直接使用this.$t 是没有任何问题的。 import { defineComponent } from 'vue'; import { Exception } from 'bkui-vue'; export default defineComponent({ ...
将vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象 main.js文件 import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: { 'en': { message: {hello: 'hello'}, ...
vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage 但是本文还是详细说一遍: 为什么需要异步加载语言包 主要还是缩小提代码包,没有按需加载前,语言包内容太多 好几屏幕全部是,虽然从webpack-analysis 看图里面占比可以忽略不计 ...
i18n, render: h => h(App) }) assets/VueI18n/language-en.js中定义对应几种语言的展示内容,每个文件变量名需要一样 module.exports ={ langage:{ ch:"CH", en:"EN", fn:"FN"}, login: { title:"Login", message:"Welcome Sign In", ...