为vuex-shared-mutations编写TS类型声明时导入虚拟模块失败

问题原因 #

你编写的TypeScript类型声明属于虚拟模块，但Vite在构建时会尝试解析实际的JavaScript文件。而vuex-shared-mutations这个npm包本身并不存在types子路径的物理文件，因此Vite抛出"文件不存在"的错误。

解决方案 #

方案一：合并类型到主模块声明（推荐） #

将vuex-shared-mutations/types中的类型合并到主模块声明中，避免使用虚拟子路径导入，从根源上解决Vite的解析问题。

修改src/types/vuex-shared-mutations.d.ts：

// src/types/vuex-shared-mutations.d.ts
interface BaseStrategyOptions {
    key: string
}

interface BroadcastChannelStrategyOptions extends BaseStrategyOptions {}

interface LocalStorageStrategyOptions extends BaseStrategyOptions {
    maxMessageLength: number
}

class BaseMutationSharingStrategy {
    addEventListener(fn: (data: any) => void): void
    share(data: any): void
}

class LocalStorageStrategy extends BaseMutationSharingStrategy {
    constructor(options: LocalStorageStrategyOptions)
}

class BroadcastChannelStrategy extends BaseMutationSharingStrategy {
    constructor(options: BroadcastChannelStrategyOptions);
}

interface CreateMutationsSharerParams {
    predicate: Array<string> | ((mutation: { type: string }) => boolean);
    strategy?: BroadcastChannelStrategy | LocalStorageStrategy
}

declare module "vuex-shared-mutations" {
    function createMutationsSharer(params: CreateMutationsSharerParams): any;
    
    // 导出所有需要的类型与类
    export {
        BroadcastChannelStrategyOptions,
        LocalStorageStrategyOptions,
        CreateMutationsSharerParams,
        LocalStorageStrategy,
        BroadcastChannelStrategy,
        BaseMutationSharingStrategy
    };
    export default createMutationsSharer;
}

然后修改src/stores/AuthStore.ts的导入语句：

import createMutationsSharer, { BroadcastChannelStrategy } from "vuex-shared-mutations";

方案二：配置Vite别名解析 #

如果希望保留/types子路径的导入方式，可以通过Vite的别名配置，将虚拟路径指向你的类型声明文件：

在vite.config.ts中添加别名规则：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vuex-shared-mutations/types': '/src/types/vuex-shared-mutations.d.ts'
    }
  }
})

同时建议使用TypeScript的类型导入语法，避免运行时错误：

import type { BroadcastChannelStrategy } from 'vuex-shared-mutations/types';

额外配置检查 #

确保你的tsconfig.json正确包含类型文件路径：

{
  "compilerOptions": {
    "typeRoots": ["./src/types", "./node_modules/@types"]
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts"]
}

内容的提问来源于stack exchange，提问作者Eren Sönmez