打包的d.ts出现了一个错误的引用/// <reference types="@/env" />

今天突然发现，我的项目做的.vue组件，在生成的d.ts文件中生成了一个错误的引用。我查了一下这个文件，这个文件好些天没有改过了，我们天天在打包都没有这个错误

/// <reference types="@/env" />
import { PropType } from 'vue';
import { MainNavMenuItem, SystemModulesManger } from './modules-manger';
declare const _sfc_main: import("vue").DefineComponent<{
    userName: {
        type: StringConstructor;
        default: string;
    };
    modulesManger: {
        type: PropType<SystemModulesManger>;
        required: true;
    };
    logoUrl: {
        type: StringConstructor;
        default: string;
    };
}

还有不知道为什么这个项目的d.ts文件生成的时候目录是src,下面是我的vite.config.ts

import { ConfigEnv, defineConfig } from 'vite'
import { join } from 'path'
import vitePluginImp from 'vite-plugin-imp'
//import md from 'vite-plugin-md'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
// import Voie from 'vite-plugin-voie'

function resolve(dir: string) {
  return join(__dirname, dir)
}

// https://vitejs.dev/config/
export default defineConfig((env: ConfigEnv) => {
  return {
    plugins: [
      vue(),
      // Voie({
      //   extensions: ['vue', 'md']
      // }),
      //md(),
      svgLoader(),
      vueJsx(),
      vitePluginImp(),
      dts()
    ],
    resolve: {
      alias: {
        '@': resolve('./src')
      }
    },
    build: {
      sourcemap: env.mode !== 'prod',
      target: 'esnext',
      chunkSizeWarningLimit: 300,
      lib: {
        entry: resolve('/src/export.ts'),
        name: 'xbgcomponents',
        formats: ['es'],
        fileName: (format) => `xbgcomponents.${format}.js`
      },

      rollupOptions: {
        external: [
          'vue',
          'naive-ui',
          'VXETable',
          'vuedraggable-es',
          'chai',
          'lodash-es',
          'xstate',
          '@xstate/vue',
          '@vicons/antd',
          '@vicons/carbon',
          '@vicons/fa',
          '@vicons/fluent',
          '@vicons/ionicons4',
          '@vicons/ionicons5',
          '@vicons/material',
          '@vicons/tabler',
          '@vicons/utils',
          '@xbgcoding/xbgcoding-pagebuilder-core'
        ],
        output: {
          globals: {
            vue: 'vue',
            'vue-router': 'vue-router'
          },
          sourcemap: true
        }
      }
    },
    // 引入less的全局变量
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: `@import "${resolve('./theme/index.less')}";`
        }
      }
    },
    // 数据转发配置
    server: {
      // 开发后端请求转发配置
      proxy: {
        '^/api/*': {
          target: 'http://localhost:8081',
          changeOrigin: true,
          rewrite: (path) => path
        }
      }
    }
  }
})

下面的是我的env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module '*.tsx' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module '*.svg?component' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

我可能找到原因了，我的data中有一个这样的代码，当我注释了之后就没有了。 defaultNavMenuItemIcon: () => import('@/assets/svg/default-menu-item.svg?component'),

你好，你的引用错误具体是什么？你使用的插件是哪个版本的？

生成的时候目录是src

指的是打包后的目录是 dist/src/... 吗？

问题的定位和修复很需要一个能复现的仓库及复现步骤，希望能提供一下。

"vite-plugin-dts": "^1.2.0",

原因我找到了，是因为我使用了一个插件来将svg文件当组件引入，需要在.env.d.ts中定义

declare module '*.svg?component' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

而这个出错的地方有一个定义使用了动态引入

defaultNavMenuItemIcon: () => import('@/assets/svg/default-menu-item.svg?component'),

这样生成的d.ts文件就出了上页的错误，上面那个错误主要的是用@来代表根路径

还有就是我发现当项目的组件多一些时，生成的d.ts就默认放到了dist/src的位置下。但如果组件不是这多时，就不会出现src目录。这个问题很容易复现，我们几个项目都有这个问题。因为是公司的项目，我没有办法把仓库分享出来。抱歉，希望感谢回复。

这样生成的d.ts文件就出了上页的错误

我没看出来上页的错误是指什么，你可以详细描述一下吗？

打包位置，当你没有显式指定 entryRoot 的时候，会根据你所有的文件所在的最小公共路径决定的，比如：

情况一，有下列文件：

root/src/app.vue root/src/main.ts

因为所有文件都在 root/src 下，那么最小公共路径为 root/src，打包时每个文件都会根据最小公共路径计算相对路径后，再写入 dist 下，则会得到：

root/dist/app.vue.d.ts root/dist/main.d.ts

情况二，有下列文件：

root/src/app.vue root/src/main.ts root/utils.ts

因为有一个文件不在 root/src 下了，可以看出最小公共路径为 root，所以打包得到：

root/dist/src/app.vue.d.ts root/dist/src/main.d.ts root/dist/utils.d.ts

最后，希望你可以遵循良好的 markdown 格式书写，这样有助于他人更好的阅读你的内容~

"vite-plugin-dts": "^1.2.0",

原因我找到了，是因为我使用了一个插件来将svg文件当组件引入，需要在.env.d.ts中定义
declare module '*.svg?component' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}
而这个出错的地方有一个定义使用了动态引入

defaultNavMenuItemIcon: () => import('@/assets/svg/default-menu-item.svg?component'),

这样生成的d.ts文件就出了上页的错误，上面那个错误主要的是用@来代表根路径

还有就是我发现当项目的组件多一些时，生成的d.ts就默认放到了dist/src的位置下。但如果组件不是这多时，就不会出现src目录。这个问题很容易复现，我们几个项目都有这个问题。因为是公司的项目，我没有办法把仓库分享出来。抱歉，希望感谢回复。

这样生成的d.ts文件就出了上页的错误

我没看出来上页的错误是指什么，你可以详细描述一下吗？

打包位置，当你没有显式指定 entryRoot 的时候，会根据你所有的文件所在的最小公共路径决定的，比如：

情况一，有下列文件：

root/src/app.vue root/src/main.ts

因为所有文件都在 root/src 下，那么最小公共路径为 root/src，打包时每个文件都会根据最小公共路径计算相对路径后，再写入 dist 下，则会得到：

root/dist/app.vue.d.ts root/dist/main.d.ts

情况二，有下列文件：

root/src/app.vue root/src/main.ts root/utils.ts

因为有一个文件不在 root/src 下了，可以看出最小公共路径为 root，所以打包得到：

root/dist/src/app.vue.d.ts root/dist/src/main.d.ts root/dist/utils.d.ts

最后，希望你可以遵循良好的 markdown 格式书写，这样有助于他人更好的阅读你的内容~

感谢回复，我检查一下我的项目中是不是存在不在src目录下的文件需要编译。

qmhc / vite-plugin-dts

打包的d.ts出现了一个错误的引用/// <reference types="@/env" /> #83