Vue3+Vite中全局枚举运行报错、模板无法识别如何解决

当前写法失效的核心原因有两点：

• 写在.d.ts类型声明文件declare global块下的枚举，仅承担TypeScript类型校验作用，不会被编译生成任何可运行的JS代码，IDE能给出智能提示只是TS识别到了类型规则，但实际运行环境中根本不存在对应的值，自然会抛出ReferenceError。
• Vue SFC的template块有独立的作用域规则，默认仅能访问当前组件实例暴露的属性、方法，未做额外配置的情况下，JS全局作用域下的变量无法直接在模板中读取。

方案1：独立枚举文件 + 自动导入（最推荐，零侵入） #

这是Vite + Vue3 + TS项目下体验最好的方案，无需手动引入，运行时和类型校验均正常，支持tree-shaking。
操作步骤：

1. 把枚举从.d.ts文件迁移到实际的业务TS文件中，例如新建src/enums/index.ts存放所有全局枚举：

export enum MyEnum {
  some = "some",
  body = "body",
  once = "once",
  told = "told",
  me = "me"
}
// 其余全局枚举可在此处统一导出

2. 安装自动导入依赖：
   npm i -D unplugin-auto-import
3. 在vite.config.ts中添加配置：

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        {
          // 配置需要全局可用的枚举，新增枚举直接在数组中追加即可
          '@/enums': ['MyEnum']
        }
      ],
      // 自动生成类型声明文件，避免TS报找不到变量的错误
      dts: 'types/auto-imports.d.ts',
    })
  ]
})

4. 重启Vite开发服务后，无论是SFC的script块、普通.ts文件还是template块，都可以直接使用MyEnum.xxx，无需手动import。

方案2：Vue全局属性挂载（无额外依赖，适合少量枚举） #

如果不想引入第三方依赖，可以把枚举挂载到Vue全局属性上，同时补充TS类型声明即可。
操作步骤：

1. 同方案1第一步，先把枚举定义在src/enums/index.ts实际文件中。
2. 在入口文件src/main.ts中挂载全局属性：

import { createApp } from 'vue'
import App from './App.vue'
import * as GlobalEnums from '@/enums'

const app = createApp(App)
app.config.globalProperties.$enums = GlobalEnums
app.mount('#app')

3. 扩展Vue组件实例类型，新建types/vue.d.ts写入以下内容：

import * as GlobalEnums from '@/enums'
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $enums: typeof GlobalEnums
  }
}
export {}

4. 使用方式：

• 模板中直接通过$enums访问：

<tr v-if="myObject.mytype === $enums.MyEnum.some">

• script块中通过组件实例访问：

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()!
// 通过 proxy.$enums.MyEnum.some 调用

方案3：常量对象模拟枚举（轻量，tree-shaking友好） #

如果不想使用TS原生枚举，可以用as const常量对象实现相同效果，打包体积更小。
操作步骤：

1. 在src/enums/index.ts中定义枚举：

export const MyEnum = {
  some: 'some',
  body: 'body',
  once: 'once',
  told: 'told',
  me: 'me'
} as const
// 导出对应类型，用于变量类型标注
export type MyEnumType = typeof MyEnum[keyof typeof MyEnum]

2. 后续可以结合方案1的自动导入、方案2的全局挂载方式全局使用，定义对象类型时用导出的MyEnumType即可：

type MyObject = {
  // 其余属性
  mytype: MyEnumType
}

• 禁止仅在.d.ts文件中通过declare定义枚举，这类写法只存在于类型层面，没有任何运行时实现，必然触发运行时错误。
• 模板中访问全局值必须通过自动注入、全局属性挂载两种方式处理，直接访问JS全局作用域变量会触发模板编译错误。

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