Vite 生产构建会压缩并重命名函数，导致 func.name 为空；通过改用具名导出对象替代数组导出，可保留函数名并正确注册为 $filters 全局方法。
vite 生产构建会压缩并重命名函数，导致 `func.name` 为空；通过改用具名导出对象替代数组导出，可保留函数名并正确注册为 `$filters` 全局方法。
在 Vue 3 + Vite 项目中，为复用 Vue 2 风格的全局过滤器（如 {{ $filters.currency(price) }}），常借助 import.meta.glob 动态导入目录下所有过滤器模块，并挂载到 app.config.globalProperties.$filters。然而，该方案在开发环境运行正常，生产构建后却出现 func.name === '' 的问题——根本原因是：当函数被包裹在数组中导出时，经 Vite（底层 Rollup + Terser）压缩后，函数会被转为匿名形式并按索引访问，原始名称信息完全丢失。
✅ 正确做法：每个 .filter.ts 文件应默认导出一个具名函数对象（而非函数数组），确保函数以明确标识符定义，从而在压缩后仍可通过 Object.keys() 或 for...in 提取名称：
// src/common/filters/currency.filter.ts
export default {
currency(value: string | number) {
if (value == null) return ''
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
}).format(Number(value))
}
}
// src/common/filters/date.filter.ts
import dayjs from 'dayjs'
export default {
formattedDate(value: string, format = 'DD, MMM YYYY, HH:mm') {
return value ? dayjs(value).format(format) : ''
},
shortDate(value: string) {
return value ? dayjs(value).format('DD/MM/YYYY') : ''
}
}
随后在 main.ts 中统一注册：
// main.ts
const filtersModules = import.meta.glob<record function>>('./common/filters/*.filter.ts', {
eager: true,
import: 'default'
})
// 初始化 $filters 对象
app.config.globalProperties.$filters = {}
// 遍历每个模块，将导出对象的所有方法挂载到 $filters
Object.values(filtersModules).forEach(filterModule => {
Object.entries(filterModule).forEach(([name, fn]) => {
app.config.globalProperties.$filters[name] = fn
})
})
app.mount('#app')</record>
⚠️ 注意事项：
-
禁止使用数组包装函数（如
export default [function currency() {...}]），这会导致名称不可枚举且压缩后彻底丢失； - 若需类型安全，可为
$filters显式声明接口，并在app.config.globalProperties上增强类型（配合declare module '@vue/runtime-core'）； -
import.meta.glob(..., { eager: true })在生产环境会内联所有模块，适合中小型过滤器集合；若数量极大，可考虑按需加载 +provide/inject替代全局挂载； - Vue 3 官方推荐使用组合式 API + 自定义 Hook 替代全局过滤器，但对迁移老项目或团队习惯 Vue 2 的场景，本方案兼容性高、侵入性低。
最终，组件中即可无差别使用：
<template><div>{{ $filters.currency(1234.56) }}</div> <!-- "$1,234.56" -->
<div>{{ $filters.formattedDate('2023-10-05T14:30:00Z') }}</div> <!-- "05, Oct 2023, 14:30" -->
</template>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
