网站建设发布网站建设项目总结

项目中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"]
}