vue3.0 引入国际化

index.js

import { createI18n } from 'vue-i18n'

import cache from '@/utils/cache'

// element-plus 国际化文件

import element_zh_cn from 'element-plus/lib/locale/lang/zh-cn'

import element_en from 'element-plus/lib/locale/lang/en'

// 框架 国际化文件  const files = import.meta.glob('./module/*.js')  导入模块写法

//注意，路径需为以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析

const zh_cn = import.meta.globEager('./lang/**/zh-CN.js')

const en_us = import.meta.globEager('./lang/**/en-US.js')

// 加载 lang 文件夹下的国际化

export const loadLang = (modules) => {

    const messages = {}

    Object.keys(modules).forEach(module => {

        Object.assign(messages, { ...modules[module].default })

    })

    return messages

}

export const messages = {

    'zh-CN': {

        langName: '简体中文',

        ...loadLang(zh_cn),

        el: {

            ...element_zh_cn

        }

    },

    'en-US': {

        langName: 'English',

        ...loadLang(en_us),

        el: {

            ...element_en

        }

    }

}

// 返回当前 Language

function getLanguage() {

    return cache.getLanguage()

}

export const i18n = createI18n({

    locale: getLanguage(),

    messages

})

zh-CN.js

export default {

    loading: '加载中...',

    add: '新增',

    delete: '删除',

    edit: '修改',

    query: '查询',

    export: '导出',

    handle: '操作',

    back: '返回',

    confirm: '确定',

    cancel: '取消',

    clear: '清除',

    close: '关闭',

    createTime: '创建时间',

    updateTime: '更新时间',

    required: '必填项不能为空',

    app: {

        title: 'Maku Element Admin',

        description:

            '基于Vue3、TypeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等开发的后台管理模板，使用门槛极低，采用MIT开源协议，完全免费开源，可免费用于商业项目等场景！',

        logoText: 'Maku Element Admin',

        miniLogoText: 'MAKU',

        username: '用户名',

        password: '密码',

        captcha: '验证码',

        signIn: '登录',

        signOut: '退出',

        large: '大型',

        default: '默认',

        small: '小型',

        close: '关闭',

        closeOthers: '关闭其它',

        closeAll: '关闭全部'

    },

    settings: {

        title: '布局设置',

        sidebarDark: '暗色侧边栏',

        sidebarLight: '亮色侧边栏',

        navbarLight: '亮色顶栏',

        navbarTheme: '主题色顶栏',

        interface: '界面设置',

        uniqueOpened: '侧栏排他展开',

        dark: '开启暗黑模式',

        logo: '开启LOGO',

        breadcrumb: '开启面包屑',

        tabs: '开启标签页',

        tabsCache: '开启标签页缓存',

        tabsStyle: '标签页风格',

        tips: '设置之后仅是临时生效，要想永久生效，需点击下方的 "复制配置" 按钮，将配置替换到 store/theme/config.ts 中。',

        copyConfig: '复制配置',

        reset: '恢复默认',

        copySuc: '复制成功',

        style1: '风格1',

        style2: '风格2'

    },

    error: {

        email: '邮箱格式不正确',

        password: '密码不能小于{len}位数'

    },

    router: {

        home: '首页',

        profilePassword: '修改密码'

    }

}

main.js

import { router } from './router'

import { i18n } from './i18n'   //引入

const app = createApp(App)

app.use(router)

app.use(i18n)   //使用

页面使用

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

<el-button type="primary" @click="onLogin()">{{ $t('app.signIn') }}</el-button>