Vite生产构建中全局导入函数name属性为空的解决方案咨询

问题原因 #

生产构建时，Vite默认使用的Terser压缩工具会移除函数的name属性以减小包体积，导致原本依赖func.name注册的过滤器无法匹配到对应名称。

解决方案（两种可选） #

方案1：改用键值对对象导出过滤器（推荐） #

直接放弃依赖func.name，在每个过滤器文件里导出键值对对象，键就是过滤器名称，值是过滤函数，注册时直接用键名，完全不受压缩影响。

修改currency.filter.ts：

export default {
  currency(value: string) {
    if (!value) return value
    return `${value.toLocaleString()}$`
  }
}

修改main.ts的注册逻辑：

// 先初始化$filters为空对象
app.config.globalProperties.$filters = {}

// 遍历所有导入的过滤器对象，合并到$filters
Object.values(import.meta.glob<Record<string, Function>>('./common/filters/*.filter.ts', { eager: true, import: 'default' }))
  .forEach(filterObj => {
    Object.assign(app.config.globalProperties.$filters, filterObj)
  })

app.mount('#app')

方案2：保留数组格式，禁用函数名压缩（不推荐，影响包体积） #

如果一定要保留原有的数组导出方式，可以配置Vite的Terser选项，禁止移除函数名：

在vite.config.ts中添加：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser',
    terserOptions: {
      keep_fnames: true, // 保留函数名
    }
  }
})

注意：该选项会保留所有函数名，导致包体积增大，仅适合临时调试或特殊场景。

更优的全局过滤器实现方式 #

除了直接注册到globalProperties，还可以用Vue3的自定义插件封装过滤器，更符合Vue的插件规范，同时支持Options API和Composition API：

1. 创建filters-plugin.ts：

import type { App } from 'vue'
// 导入所有过滤器
const filterModules = import.meta.glob<Record<string, Function>>('./common/filters/*.filter.ts', { eager: true, import: 'default' })

export default {
  install(app: App) {
    const $filters: Record<string, Function> = {}
    // 合并所有过滤器
    Object.values(filterModules).forEach(module => {
      Object.assign($filters, module)
    })
    // 注册到全局属性（供Options API使用）
    app.config.globalProperties.$filters = $filters
    // 提供给Composition API使用
    app.provide('$filters', $filters)
  }
}

2. 在main.ts中使用插件：

import { createApp } from 'vue'
import App from './App.vue'
import FiltersPlugin from './filters-plugin'

const app = createApp(App)
app.use(FiltersPlugin)
app.mount('#app')

使用方式：

• Options API：this.$filters.currency(price)
• Composition API：

import { inject } from 'vue'
const $filters = inject<Record<string, Function>>('$filters')
// 使用
$filters?.currency(price)

内容的提问来源于stack exchange，提问作者Saeid Doroudi