记录vite-plugin-dts打包时无法生成 .d.ts文件问题

embedded/2025/4/2 7:41:44/

项目中build 时候需要生成如下dist中的main.d.ts,
在这里插入图片描述
如果配置vite additionalData会造成预编译scss报错

preprocessorOptions: {scss: {additionalData: `@import "@/assets/styles/variables.scss";`,// 刚开始使用下面两个配置可以打包出来,但是会造成预编译scss报错,所以不能用// api: 'modern-compiler', // 使用现代API避免警告// silenceDeprecations: ['legacy-js-api'], // 忽略旧API的弃用警告}

所以要在vite配置

  plugins: [dts({// 指定 tsconfig 文件tsconfigPath: 'tsconfig.app.json',include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],rollupTypes: true,        // 合并为单个文件(如 main.d.ts)copyDtsFiles: true        // 确保复制所有关联的 .d.ts 文件}), tailwindcss()],

直接上正确配置
package.json

 "types": "./dist/vue3/main.d.ts","main": "./dist/vue3/moten.umd.cjs","module": "./dist/vue3/moten.js","exports": {".": {"types": "./dist/vue3/main.d.ts","import": "./dist/vue3/moten.js","require": "./dist/vue3/moten.umd.cjs"},"./style": {"import": "./dist/vue3/main.css","require": "./dist/vue3/main.css"},"./vue2": {"types": "./dist/vue2/main.d.ts","import": "./dist/vue2/moten.js","require": "./dist/vue2/moten.umd.cjs"},"./vue2/style": {"import": "./dist/vue2/main.css","require": "./dist/vue2/main.css"}},

vite.config.ts

import { defineConfig } from 'vite'
import { isVue2 } from 'vue-demi'
import vue from '@vitejs/plugin-vue'
import { createVuePlugin } from 'vite-plugin-vue2'
import path, { dirname, resolve } from 'path';
import tailwindcss from '@tailwindcss/vite'
import dts from 'vite-plugin-dts'
import { fileURLToPath } from 'url';const name = isVue2 ? 'vue2' : 'vue3'
// const __dirname = dirname(fileURLToPath(import.meta.url))console.log('当前路径:', resolve(__dirname, 'src')); // 确保输出正确路径// https://vite.dev/config/
export default defineConfig({plugins: [isVue2 ? createVuePlugin() : vue(), dts({// 指定 tsconfig 文件tsconfigPath: 'tsconfig.app.json',include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],rollupTypes: true,        // 合并为单个文件(如 main.d.ts)copyDtsFiles: true        // 确保复制所有关联的 .d.ts 文件}), tailwindcss()],resolve: {alias: {// '@': resolve(__dirname, 'src')'@': path.resolve(__dirname, 'src'),// '@': resolve('src'),// '@': fileURLToPath(new URL('./src', import.meta.url))},},css: {// css预处理器preprocessorOptions: {scss: {api: 'legacy',  // 强制使用旧版编译器additionalData: `@import "@/assets/styles/variables.scss";`,// 给导入的路径最后加上 ; // 刚开始使用下面两个配置可以打包出来,但是会造成预编译scss报错,所以不能用// api: 'modern-compiler', // 使用现代API避免警告// silenceDeprecations: ['legacy-js-api'], // 忽略旧API的弃用警告}}},build: {cssCodeSplit: true, // 启用 CSS 代码分割outDir: `dist/${name}`,lib: {entry: resolve(__dirname, 'src/main.ts'),name: 'moten',// 将添加适当的扩展名后缀fileName: 'moten',formats: ['es']},rollupOptions: {// 确保外部化处理那些external: ['vue', 'vue-demi'],output: {// 在 UMD 构建模式下为这些外部化的依赖// 提供一个全局变量globals: {vue: 'Vue','vue-demi': 'vue-demi'},exports: 'named',},},},
})

tsconfig.app.json

{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","baseUrl": "./","paths": {"@/*": ["src/*"]},"composite": true,"declaration": true, // 核心:必须开启"emitDeclarationOnly": true, // 可选:仅生成声明文件/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

http://www.ppmy.cn/embedded/178244.html

相关文章

路由器、交换机、防火墙、服务器、负载均衡在网络中作用

1. 路由器(Router) 核心作用 跨网络通信:连接不同网络(如LAN与WAN、不同子网),基于IP地址进行数据包转发。 路由决策:通过路由协议(如OSPF、BGP)动态选择最优路径&…

LangChain 核心技术

以下是基于我简历中的项目经验,结合LangChain技术栈整理的常见面试题及针对性回答建议。这些问题覆盖了技术实现、项目设计、创新点和行业应用等方面: 一、LangChain 核心技术相关问题 1. 请解释 LangChain 的核心设计理念和主要组件。 考察点:对LangChain框架的理解深度。…

深度解读 AWS IAM:身份访问管理与安全的核心纽带

导语 在 AWS(亚马逊云服务)的生态体系中,AWS IAM(Identity and Access Management)犹如坚固的堡垒,守护着用户在云端的各类资源。它不仅是管理用户身份与访问权限的关键工具,更是维系 AWS 安全…

【AI论文】挑战推理的边界:大型语言模型的数学基准测试

摘要:近年来,大型推理模型的迅猛发展导致现有用于评估数学推理能力的基准测试趋于饱和,这凸显出迫切需要更具挑战性和严谨性的评估框架。为填补这一空白,我们推出了OlymMATH,这是一项全新的奥林匹克级数学基准测试&…

VS2022 Qt 项目使用数据库报错问题

一、问题现象:无法解析的外部符号 "__declspec(dllimport) public: __cdecl QSqlDatabase::QSqlDatabase(void)" 定义变量QSqlDatabase db后报错信息为“无法解析的外部符号” 二 、解决步骤: 1、在 Visual Studio 2022 中:右键项…

uv命令介绍(高性能Python包管理工具,旨在替代pip、pip-tools和virtualenv等传统工具)

文章目录 **主要功能**1. **快速安装和管理 Python 包**2. **生成和管理锁文件 (requirements.lock)**3. **创建虚拟环境**4. **与 poetry 兼容** **核心优势**1. **极快的速度**:基于 Rust 实现,利用多线程和缓存大幅加速依赖解析。2. **轻量且独立**&a…

wait和notify : 避免线程饿死(以及votile内存可见性和指令重排序问题)

各位看官,大家早安午安晚安呀~~~ 如果您觉得这篇文章对您有帮助的话 欢迎您一键三连,小编尽全力做到更好 欢迎您分享给更多人哦 今天我们来学习:wait和notify : 避免线程饿死(以及votile内存可见性和指令重排序问题) …

使用 Ansys Discovery 可视化液体池中的水流

了解 ANSYS Discovery:设计领域的变革者 ANSYS Discovery 是一款功能强大的软件工具,能够彻底改变设计流程。借助其先进的仿真功能,工程师现在可以在设计投入生产之前更深入地了解其设计。通过使用 ANSYS Discovery,设计师可以快…