Vue+Vite环境下Tsyringe解析含参服务报错的解决求助

这个错误核心原因是Tsyringe无法获取到服务类的构造函数参数元数据，而元数据的生成依赖reflect-metadata和正确的装饰器编译配置。以下是针对性的解决步骤：

1. 强制reflect-metadata优先导入 #

reflect-metadata必须在所有服务类、Tsyringe甚至Vue代码之前导入，否则元数据无法被正确收集。修改main.ts：

// 放在文件最顶部，必须第一个导入
import 'reflect-metadata';

import { createApp } from "vue";
import { container } from "tsyringe";
import { Database, ListService } from "./services";
import App from "./App.vue";

// 后续代码不变
container.registerSingleton(Database);
container.registerSingleton(ListService);

console.log(container.resolve(Database));
console.log(container.resolve(ListService));

const app = createApp(App);
app.mount("#app");

2. 给所有服务类添加@injectable()装饰器 #

Tsyringe需要通过这个装饰器标记可注入的类，并生成参数类型元数据。比如你的services/index.ts：

import { injectable } from 'tsyringe';

@injectable()
export class Database {
  // 无依赖构造函数
}

@injectable()
export class ListService {
  // 构造函数参数会被Tsyringe自动识别
  constructor(private database: Database) {}
}

注意：如果某个服务没有加这个装饰器，即使注册到容器，有依赖时也会触发TypeInfo not known错误。

3. 配置Vite正确处理装饰器元数据 #

Vite 5默认用esbuild编译，而esbuild默认不会保留装饰器元数据，必须通过插件强制开启。

安装依赖 #

npm install -D @anatine/esbuild-decorators @rollup/plugin-typescript

修改vite.config.ts #

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { esbuildDecorators } from '@anatine/esbuild-decorators';

export default defineConfig({
  plugins: [vue()],
  // 开发阶段优化依赖时处理装饰器
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        esbuildDecorators({
          tsconfig: './tsconfig.json',
          emitDecoratorMetadata: true,
          experimentalDecorators: true,
        }),
      ],
    },
  },
  // 生产构建阶段用rollup插件处理
  build: {
    rollupOptions: {
      plugins: [
        require('@rollup/plugin-typescript')({
          tsconfig: './tsconfig.json',
          emitDecoratorMetadata: true,
          experimentalDecorators: true,
          // 仅处理TS文件，避免和Vite的Vue处理逻辑冲突
          include: ['src/**/*.ts'],
        }),
      ],
    },
  },
});

4. 验证配置 #

• 删除node_modules和dist目录，重新执行npm install
• 重启Vite开发服务，测试container.resolve(ListService)是否正常运行

关键排查点 #

• 确认tsconfig.json中experimentalDecorators和emitDecoratorMetadata都已设为true（你的配置已经满足）
• 保持package.json的"type": "module"一致性，不要混用CommonJS导入方式
• Vite的isolatedModules: true可以和装饰器元数据共存，只要插件正确处理元数据生成

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