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()