vue-i18n网页国际化配置

通常在vue中，会使用vue-i18n来做页面语言的国际化。省的开发人员还自己去实现。这里就简单说下具体的用法。

安装

npm install vue-i18n
yarn add vue-i18n

加载

在main.js中，这边是写了一个配置，用来专门配置多语言

// 国际化
import i18n from '@/util/language';

main.js

配置

在配置的index.js页面里面，写了前端自动化，将该目录下的所有文件都加载进来。

/**
 * 该文件将当前文件夹下的所有.js结尾的文件全部读取出来。
 * 并导出去
 */

import VueI18n from 'vue-i18n'
import Vue from 'vue';
import * as cookie from '@/util/cookie.js';

Vue.use(VueI18n)

const files = require.context('.', true, /\.js$/)
const messages = {
    zh: {},
    en: {}
}

files.keys().forEach(key => {
    // 过滤本身
    if (key === './index.js') return;
    // 切割key的首尾
    const temp = key.replace('./', '').replace('.js', '').split('/');
    const count = temp.length;
    // 如果有子文件夹，导入文件夹名字和文件夹下的 index.js文件
    if (count > 1 && temp[count - 1] !== 'index') return;
    const config = files(key).default;
    messages.zh[temp] = config.zh;
    messages.en[temp] = config.en;
});

if (process.env.NODE_ENV === 'development') {
  console.log(' == language ==', messages)
}

const getLocale = () => {
    const key = 'alpsentekchkey';
    const result = cookie.getCookie(key);
    return result || 'zh';
}
const i18n = new VueI18n({
  locale: getLocale(),
  messages
})
export default i18n

页面语言配置

拿language下的nav导航栏举例。这个文件配置了导航栏所需要的所有语言配置。

导航栏配置

配置完成后，整体的数据结构。对象里面分别有zh和en两个版本。每个底下都配置了具体哪个页面需要的字段。

配置对象

页面上使用

配置好后，使用就很简单了。拿nav举例。要拿到search的这个值，只要在页面写入{{$t('nav.search')}}，当然在js文件中也可以通过this.$t('nav.search')来拿到

{{$t('nav.search')}}

页面上使用

中英文切换

写一个mixin，通过监听中英文切换按钮的时候，同时去执行this.$i18n.locale来改变全局的语言状态。

import {
    mapGetters
} from 'vuex';
// 深度合并数据
export default {
    data() {
        return {}
    },
    mounted() {
    },
    watch: {
        // 系统语言发生变化
        zhcn: {
            handler: function(newVal) {
                try {
                    // 设置i18n的语言类型
                    this.$i18n.locale = newVal ? 'zh' : 'en';
                    document.title = this.$t('home.htmlTitle');
                    // 修改页面的文字
                    this.changePageLanguage();
                } catch (e) {
                    // 页面中没有实现changePageLanguage的方法
                }
            },
            deep: true,
        }
    },
    computed: {
        ...mapGetters('language', ['zhcn', 'zhPageKey']),
        ...mapGetters(['isMobileBrowse']),
        mobilePrefix() {
            return this.isMobileBrowse ? '_mobile' : '_pc'
        }
    },
}

正常中英文状态都会存入到cookie，如果cookie没有值的时候，可以用个拿当前浏览器的语言版本。

                const jsSrc = (navigator.language || navigator.browserLanguage).toLowerCase();
                if(jsSrc.indexOf('zh') >= 0){
                    // 假如浏览器语言是中文
                    
                } else if(jsSrc.indexOf('en') >= 0) {
                        // 假如浏览器语言是英文
                    
                }