vue-i18n前端国际化实践

什么是vue-i18n?

使用此插件可以实现页面语言的切换，让前端项目更加国际化。

安装

npm install vue-i18n / yarn add vue-i18n

使用方法

1、先在src文件夹下建lang文件夹，专门管理语言包配置：

lang文件夹下面分别建en.ts、zh.ts文件，举个例子：

// en.ts
export default {
    route:{
        dashboard: 'Dashboard',
        documentation: 'Documentation',
        guide: 'Guide',
        permission: 'Permission',
    },
    player: {
        accountname: 'Please enter your user account',
        btnFilter: 'query',
        btnCreate: 'add new players'
    },
}

// zh.ts
export default {
    route:{
        dashboard: '首页',
        documentation: '文档',
        guide: '引导页',
        permission: '权限测试页',
    },
    player: {
        accountname: '请输入用户账号',
        btnFilter: '查询',
        btnCreate: '新增玩家'
    },
}

在lang文件夹下新建index.ts文件，统一导入各语言包文件，并注册插件，导出i18n;

import Vue from 'vue';
import VueI18n from 'vue-i18n';

// 此文件主要实现浏览器自动识别语言变化来展示
import {getLanguage} from '@utils/cookies'

// element-ui内置的语言包
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

// 用户自定义的语言包
import enLocale from './en'
import zhLocale from './zh'

// 注册插件
Vue.use(VueI18n)

const messages = {
    en:{
        ...enLocale,
        ...elementEnLocale
    },
    zh:{
        ...zhLocale,
        ...elementZhLocale
    }
}

// 获取语言设置
export const getLocale = ()=>{
    // 默认获取cookie中语言设置
    const cookieLanguage = getLanguage();
    if(cookieLanguage){
        return cookieLanguage
    }
    
    // 浏览器语言设置
    const language = navigator.language.toLowerCase();
    const locales = Object.keys(message);
    for(const locale of locales){
        if(language.indexOf(locale)>-1){
            return locale
        }
    }
    // 默认语言
    return 'zh'
}

const i18n = new VueI18n({
    locale: getLocale();
    messages
})

export default i18n;

utils文件中的设置获取cookies中的语言

import Cookies from 'js-cookie' 

const languageKey = 'language'
export const getLanguage = ()=> Cookies.get(languageKey)
export const setLanguage = (language:string)=>Cookies.set(languageKey, language)

2、在main.ts文件中引入vue-i18n

import i18n from '@/lang';
new Vue({
    i18n
})

3、在文件中使用：

在组件中通过$t('')的方式调用

<el-input :placeholder='$t('player.accountname')'></el-input>
<el-button>
    $t('player.btnFilter')
</el-button>

基本使用方式就是这样啦，欢迎指正~