Vue项目vue-i18n国际化/多语言问题——Angular-translate.js的闪烁问题

@Vue项目vue-i18n国际化/多语言问题——Angular-translate.js的闪烁问题

前段时间项目要求做国际化多语言，其实多语言没有那么难，但是对于项目中的中文进行翻译和替换真是一个吃力不讨好的活，英文水平烂是一方面，多多少少在替换过程中漏这漏那的，真不叫人省心

vue项目中的多语言问题

//此方法是写在utils公共方法里面的

export function getLanguae() {
    //ie浏览器取navigator.userLanguage
    let languageInfo = navigator.language && navigator.languages ? navigator.languages[0] : navigator.userLanguage || 'zh';
    //获取浏览器配置语言的前两位
    let lang = languageInfo.substr(0,2)
    if (lang == 'zh') {
        return 'zh';
    }else if (lang == 'en') {
        return 'en';
    }else {
        return 'zh';
    }
}

此处取浏览器的设置语言原先是直接取navigator.language，后面用户反馈chrome浏览器里使用系统没有设置英文却展示英文
排查后发现chrome浏览器70+版本上的navigator.language并不是当前设置使用的语言，而是navigator.languages数组中的第一项
而navigator.languages数组中的数据顺序则是由浏览器语言设置用户对语言设置的偏好排序决定
具体chrome浏览器从哪个版本开始有这样的差异没有细究
后参考市面上的一些产品对此情况的处理，故作现有的配置

//在language目录下设置了三个js文件，分别是en，zh，index
//en和zh是对应语言的配置，
//index里面的代码如下
import {getLanguae} from '@/utils/utils'
import zh from './zh'
import en from './en'

export default {
    locale: getLanguae(),
    messages: {zh,en}
}

Angular-translate.js的闪烁问题

最近接了一个angular项目进行二次开发，用户在使用过程中提出需要解决初次加载页面时的闪烁问题
原因是语言文件的异步加载。HTML已经解析好了，但是json语言包文件还没有加载好。
网上查到了一些方法，可以隐藏HTML中的标签，等语言包文件加载好之后，再渲染标签
另外了解到可以再head里面用

<script src="./zh-cn.js"></script>
<script src="./en.js"></script>

en.js文件

var zhLanguage = {
    'hello': 'Hello,World！',
    'name': 'I am Falco'
}

zh-cn.js文件

var enLanguage = {
    'hello': '你好！',
    'name': '我是法尔科'
}

indexModule.config(function ($translateProvider){
    //这里是原先使用json配置文件的相关设置
    // $translateProvider.userStaticFilesLoader({  //加载静态语言文件
    //     prefix: '/i18n/',  //路径
    //     suffix: '.json'  //后缀
    // })

    //为解决闪烁问题使用js
    $translateProvider.translations('zh-cn',zhLanguage)
    $translateProvider.translations('en',enLanguage)

    if(!localStorage.lang){
        localStorage.setItem('lang','zh-cn')
    }
    $translateProvider.preferredLanguage(localStorage.getItem('lang'));
    // Enable escaping of HTML
    $translateProvider.userSanitizeValueStrategy('escape')
})

到这里基本已经解决了多数页面的闪烁问题啦，但是后面自测过程中发现，有个别页面还是存在问题，无意中发现在HTML最外层的div上加上ng-cloak可以解决这个问题，但是由于页面中有操作DOM加进去的对树结构的一些东西失效了，故把ng-cloak挪到了下一层的标签上，解决了这个问题。时间问题没有多考虑原因，解决问题优先

参考博文