A07-vue-i18n国际化配置

‍ 个人主页：Silence Lamb
本章内容：【vue-i18n国际化配置】

---

Silence-Vue v1.0.0

基于VUE前端快速开发框架

一、创建工具类

1.1【本地缓存】

• 本地缓存 | 会话级缓存：src\utils\tools\cache.js

/*
 * @Description  : 本地缓存 | 会话级缓存
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
const sessionCache = {
    /**
     * @Description    : 设置会话级缓存
     * @param           {string} key 缓存键
     * @param           {string} value 缓存值
     */
    set(key, value) {
        if (!sessionStorage) {
            return
        }
        if (key != null && value != null) {
            sessionStorage.setItem(key, value)
        }
    },
    /**
     * @Description    : 获取会话级缓存值
     * @param           {string} key 缓存键
     * @return          { }
     */
    get(key) {
        if (!sessionStorage) {
            return null
        }
        if (key == null) {
            return null
        }
        return sessionStorage.getItem(key)
    },

    setJSON(key, jsonValue) {
        if (jsonValue != null) {
            this.set(key, JSON.stringify(jsonValue))
        }
    },
    getJSON(key) {
        const value = this.get(key)
        if (value != null) {
            return JSON.parse(value)
        }
    },
    remove(key) {
        sessionStorage.removeItem(key)
    },
    /**
     * @Author         : SilenceLamb
     * @Description    : 本地缓存
     */
}
const localCache = {
    set(key, value) {
        if (!localStorage) {
            return
        }
        if (key != null && value != null) {
            localStorage.setItem(key, value)
        }
    },
    get(key) {
        if (!localStorage) {
            return null
        }
        if (key == null) {
            return null
        }
        return localStorage.getItem(key)
    },
    setJSON(key, jsonValue) {
        if (jsonValue != null) {
            this.set(key, JSON.stringify(jsonValue))
        }
    },
    getJSON(key) {
        const value = this.get(key)
        if (value != null) {
            return JSON.parse(value)
        }
    },
    remove(key) {
        localStorage.removeItem(key)
    },
}

export default {
    /**
     * 会话级缓存
     */
    session: sessionCache,

    /**
     * 本地缓存
     */
    local: localCache,
}

1.2【语言管理】

• 语言管理：src\utils\tools\language.js

/*
 * @Description  : 语言管理工具
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
import store from '@/store'
import cache from './cache'
export default {
    /**
     * @Description 获取lang语言设置
     * @returns {string} 语言种类
     */
    getLanguage() {
        const chooseLanguage = cache.local.get('language')
        if (chooseLanguage) {
            return chooseLanguage
        } else {
            return store.getters.lang
        }
    },
    /**
     * @Description 设置语言种类
     * @param {string} lang 语言
     */
    setLanguage(lang) {
        cache.local.set('language', lang)
        store.dispatch('settings/changeSetting', { key: 'lang', value: lang }).then()
    },
}

二、语言切换组件

• 语言管理：src\components\LangSelect

<!--
 * @Description  : 语言切换
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
-->
<template>
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
        <div>
            <svg-icon class-name="international-icon" icon-class="language" />
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item :disabled="language === 'zh'" command="zh"> {{ $t('language.Chinese') }} </el-dropdown-item>
                <el-dropdown-item :disabled="language === 'en'" command="en"> {{ $t('language.English') }} </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
export default {
    name: 'LangSelect',
    data() {
        return {
            language: '',
        }
    },
    created() {
        this.getLanguage()
    },
    methods: {
        /**
         * @Description    : 获取当前语言类型
         * @return          {String} 语言类型
         */        
        getLanguage() {
            this.language = this.$language.getLanguage()
            console.log(this.$language.getLanguage())
        },
        /**
         * @Description    : 切换语言操作
         * @param           {String} lang 语言种类
         */        
        handleSetLanguage(lang) {
            this.$language.setLanguage(lang)
            this.getLanguage()
            this.$i18n.locale = lang
            this.$message({
                message: 'Switch Language Success',
                type: 'success',
            })
        },
    },
}
</script>

三、国家化语言配置

3.1【语言资源包】

• 中文：src\language\modules\utils\zh\index.js

/*
 * @Description  : 国际化资源-中文
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
export default {
    /**
     * @Description    : language.js
     */
    language: {
        Chinese: '中文',
        English: '英文',
    },
}

• 英文：src\language\modules\utils\en\index.js

/*
 * @Description  : 国际化资源-英文
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
export default {
    /**
     * @Description    : language.js
     */
    language: {
        Chinese: 'Chinese',
        English: 'English',
    },
}

3.2【加载语言资源】

• 加载语言资源：src\language\index.js

/*
 * @Description  : 加载语言包
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
import { createI18n } from 'vue-i18n'
import language from '@/utils/tools/language'
import fileNameUtils from '@/utils/tools/fileName'
import elementEnLocale from 'element-plus/lib/locale/lang/en' // element-plus lang
import elementZhLocale from 'element-plus/lib/locale/lang/zh-cn' // element-plus lang
/**
 *  准备要合并的语言包
 * @type {{en: *[], "zh-cn": *[]}}
 */
const assignLocale = {
    zh: [elementZhLocale],
    en: [elementEnLocale],
}
/**
 * @Description 获取最后一个文件夹
 * @param {string} filePath
 * @returns {string} fileName 子文件夹名
 */
getLastFileName(filePath) {
    const matches = filePath.substring(0, filePath.lastIndexOf('/')).split('/').pop()
    return matches
}
/**
 * @Description    : 加载在 modules 目录中动态加载语言包
 * @return          {{}} 语言源
 */
export function loadLang(language) {
    const messages = {
        zh: [],
        en: [],
    }
    const messagePack = require.context('./modules/', true, /\.js$/)
    messagePack.keys().forEach((filePath) => {
        const localeMessage = messagePack(filePath).default
        const fileName = getLastFileName(filePath)
        //合并语言包
        assignLocale[fileName].push(localeMessage)
        Object.assign(messages[fileName], ...assignLocale[fileName])
    })
    return messages
}

• 国际化配置：src\language\index.js

const i18n = new createI18n({
    locale: language.getLanguage(),
    legacy: false, // 让 setup 函数可以通过 t 访问
    globalInjection: true, // 让 template 可以像 vue2 那样使用 $t 来访问
    fallbackFormat: 'en',
    messages: loadLang(language.getLanguage()),
})
export default i18n

• 全局引入：src\main.js

import { createApp } from 'vue'
import App from './App.vue'

import i18n from '@/language' // 我是把i18n单独放一个文件夹，这里是引用

const app = createApp(App)
app.use(i18n)

app.config.productionTip = false // 阻止 vue 在启动时生成生产提示
app.mount('#app')

四、使用国际化

4.1【组件中使用】

<template>
    <div class="app-container">
        {{ $t('language.Chinese') }}
        <el-button type="primary" @click="get">loadingel-button>
    div>
template>

<script>
export default {
    name: 'IndexVue',
    data() {
        return {
            lang: 'hello',
        }
    },
    watch: {},
    methods: {
        get(){
            console.log(this.$t('language.Chinese'));
        }
    },
}
script>

4.2【JS文件使用】

/*
 * @Description  : 文本复制功能
 * @Author       : SilenceLamb
 * @Version      : V1.0.0
 */
import Clipboard from 'clipboard'
import model from '@/utils/tools/model'
import i18n from '@/language'
/**
 * @Description 复制文本
 * @param {String} text - 文本
 * @param {event} event - 事件
 */
export function handleClipboard(text, event) {
    const clipboard = new Clipboard(event.target, { text: () => text })
    clipboard.on('success', () => {
        clipboardSuccess()
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        clipboardError()
        clipboard.destroy()
    })
    clipboard.onClick(event)
}

/**
 * @Description 复制成功
 * @return {string} 成功
 */
export function clipboardSuccess() {
    model.notifySuccess(i18n.global.t('copy.Success'))
}

/**
 * @Description 复制失败
 * @return {string} 失败
 */
export function clipboardError() {
    model.notifyError(i18n.global.t('copy.Failed'))
}

4.3 【菜单中使用】

/**
* 菜单标题
* @param title 标题
* @return {*} title |  this.$t(`router.` + title)
*/
routerTitle(title) {
   if (this.$t(`router.` + title)) {
       return this.$t(`router.` + title)
   } else {
       return title
   }
},

4.4【切换语言】

handleSetLanguage(lang) {
  this.$i18n.locale = lang
  this.$message({
      message: 'Switch Language Success',
      type: 'success',
  })
},