需求

项目为多页应用,包含产品a、b、c、d、e,每个产品都有自己的翻译文件。
一次加载所有翻译文件是极度不合理的。于是考虑动态加载。

实现

参考官方文档:延迟加载翻译

项目结构


├── dist // 静态资源输出目录

├── src
│   ├── assets
│   ├── components
│   ├── lang // 语言翻译文件
│   ├── a
│   ├── en_US.js
│   └── zh_CN.js
│   ├── b
│   ├── en_US.js
│   └── zh_CN.js
│   ├── c
│   ├── en_US.js
│   └── zh_CN.js
│   ├── d
│   ├── en_US.js
│   └── zh_CN.js
│   ├── e
│   ├── en_US.js
│   └── zh_CN.js
│   ├── pages
│   ├── a
│   ├── b
│   ├── c
│   ├── d
│   ├── e
│   ├── utils
│   ├── i18n.js
│   ├── ...

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n' import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // LANG:全局变量,从cookie中获取的当前语言版本,'zh_CN'、'en_US'
// IS_INTL:全局变量,是否为国际版
import { LANG, IS_INTL } from '@/constant' Vue.use(VueI18n) const i18n = new VueI18n({
silentTranslationWarn: true
})
// 这里需要覆盖Element本地化函数,不然会冲突
ElementLocale.i18n((key, value) => i18n.t(key, value))
export default i18n /**
* 更改vueI18n实例
* @param lang 'zh_CN'、'en_US'
*/
function setI18nLang (lang) {
i18n.locale = lang
// axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
} /**
* 动态加载语言
* @param path 当前路径(对应lang下文件夹名)
*/
const _LANGS = ['zh_CN', 'en_US']
const ELEMENT_LANG = {
zh_CN: zhLocale,
en_US: enLocale
}
let loadedLanguages = [] export function loadLanguageAsync (path) {
// lang目前是从cookie中获取,所以没有作为参数传递,此处lang也可作为变量传递 // 如果cookie中没有获取到语言项,国际版默认初始化为英文
const lang = LANG || (IS_INTL ? 'en_US' : 'zh_CN') if (!path || !_LANGS.includes(lang)) return if (i18n.locale !== lang) {
if (!loadedLanguages.includes(lang)) {
// 文件大时可拆分打包,目前项目中翻译文件均为4、5K左右,就没拆
// return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${path}/${lang}`).then(msgs => {
return import(`@/lang/${path}/${lang}`).then(msgs => {
const _temp = Object.assign(msgs.default, ELEMENT_LANG[lang])
i18n.setLocaleMessage(lang, _temp)
loadedLanguages.push(lang)
return setI18nLang(lang)
})
}
return Promise.resolve(setI18nLang(lang))
}
return Promise.resolve(lang)
}

main.js

import Vue from 'vue'
import App from './label.vue'
import store from './store/index'
import router from './router/index' import i18n, { loadLanguageAsync } from '@/utils/i18n'
import '@label/plugins/element-ui'
import '@/assets/styles/common.less'
import AppComponents from '@label/components/index' // 注册全局组件 Vue.config.productionTip = false
Vue.use(AppComponents) // a页
loadLanguageAsync('a').then(_ => {
new Vue({
i18n,
store,
router,
render: h => h(App)
}).$mount('#app')
})

切换语言组件

主要操作:切换时setCookie后重刷页面
原因:本来直接调用loadLanguageAsync是可以正常重刷语言包的,但是这里由于页面某些显示内容是来源于后端接口的,还是得重新请求,所以重刷了整页

setCookie('jd.erp.lang', lang || 'en_US', 1, { path: '/', domain: CUR_HOST_SUFFIX })
window.history.go(0)

组件内容如下:

// langs.vue
<template>
<el-dropdown
class="icon-info icon-langs"
@command="changeLang"
>
<img :src="imgSrc">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in langs"
:key="item.value"
:command="item.value"
:disabled="item.value === locale"
>
{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> <script>
import { LANG, CUR_HOST_SUFFIX } from '@/constant'
import { setCookie } from '@/utils/utils' export default {
name: 'langs',
data () {
return {
imgSrc: require('@label/assets/icons/header-langs.svg'),
locale: LANG,
langs: [
{ label: '中文', value: 'zh_CN' },
{ label: 'English', value: 'en_US' }
]
}
},
methods: {
changeLang (lang) {
this.locale = lang
setCookie('jd.erp.lang', lang || 'en_US', 1, { path: '/', domain: CUR_HOST_SUFFIX })
window.history.go(0)
}
}
}
</script>
 

Element + Vue I18n动态import加载国际化语言包翻译文件的更多相关文章

  1. #iOS问题记录#动态Html加载本地CSS和JS文件

    所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全 ...

  2. 动态的加载显示oracle警告日志文件内容

    Last login: Fri Jan 25 00:37:47 2019 from oracle [root@oracle ~]# su - oracle [oracle@oracle ~]$ sql ...

  3. Vue 动态图片加载路径问题和解决方法

    最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件.因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载.下面 ...

  4. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  5. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  6. Vue中图片的加载方式

    一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...

  7. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

  8. 使用javassist运行时动态重新加载java类及其他替换选择

    在不少的情况下,我们需要对生产中的系统进行问题排查,但是又不能重启应用,java应用不同于数据库的存储过程,至少到目前为止,还不能原生的支持随时进行编译替换,从这种角度来说,数据库比java的动态性要 ...

  9. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

随机推荐

  1. 91.用js遍历原生json数据

    <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. git 从远程克隆代码并实现分支开发,合并分支,上传本地代码到远程

    首先确认你已经安装了git 1.克隆远程代码到本地的操作 git clone 地址   打开git操作命令行 鼠标右键点击        复制需要克隆的项目的地址类似下面的ssh     输入命令进行 ...

  3. 使用Beef劫持客户端浏览器并进一步使用Beef+msf拿客户端shell

    环境: 1.Kali(使用beef生成恶意代码,IP:192.168.114.140) 2.一台web服务器(留言板存在XSS跨站脚本漏洞,IP:192.168.114.204) 3. 客户端(用于访 ...

  4. 【案例】如何让阀门制造提高排产效率?APS系统帮你实现

    随着公司业务发展,苏州纽威阀门公司将承接来自各个国家的更多产品业务,越来越多的客户要求对产品进行精确的交期预估和管理.而目前对产线的产能管理仅限于人工静态产能计算. 由于产品繁多,生产流程各异,不同产 ...

  5. 访问Stack Overflow速度超慢的原因

    很多网站,尤其是国外网站,为了加快网站的速度,都是用了 Google 的 CDN. 但是在天朝,由于某些原因,导致全球最快的 CDN 变成了全球最慢的. 解决方法步骤如下: 下载ReplaceGoog ...

  6. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  7. 使用awk格式化输出文本

    注意:本文并不是一篇awk入门文章,而是偏重实例讲解 awk借鉴了c语法,因此awk在许多地方还保留有c语言的痕迹,比如printf语句:for,if的语法结构等 介绍 最简单地说,AWK 是一种用于 ...

  8. Java开发分析工具JProfiler的详细使用方法解析

    JProfiler 11 是一款功能强大的Java代码分析工具,JProfiler的直观UI可帮助您解决性能瓶颈,确定内存泄漏并了解线程问题且JProfiler 11 Mac破解版配置会话非常简单,第 ...

  9. httprunner学习15-运行用例命令行参数详解

    前言 HttpRunner 在命令行中启动测试时,通过指定参数,可实现丰富的测试特性控制. 命令行参数CLI 使用 -h 查看相关命令行参数 hrun -h 参数名称 参数值 参数说明 -h, --h ...

  10. P4281 [AHOI2008]紧急集合 / 聚会[LCA]

    解析 蒟蒻用的办法比较蠢,不如上面的各位大佬,直接化成一个式子了,我还是分类讨论做的. 下面正文. 猜想:最优集合点一定是三点任意两对点对应的路径的交点. 不妨这样想,如果任意两个人经过同一条路径,那 ...