build:{outDir:"lib",//输出文件名称lib:{entry:path.resolve(__dirname,"./src/plugins/index.ts"),//指定组件编译入口文件name:"vue-msg",fileName:"vue-msg",},//库编译模式配置rollupOptions:{// 确保外部化处理那些你不想打包进库的依赖external:["vue"],output:{// 在 UMD 构建模式下为这些外部...
是因为 vue-tsc --noEmit 是 TypeScript 编译器(tsc)的命令,vite build 则是使用 Vite 进行最终的构建。所以会检测ts的类型是否写的正确标准,如果项目中类型错误少的话可以一一解决并打包但是goview的TS类型错误的地方实在太多了,所以直接不检测类型来进行打包。 "build:pro":"vite build --mode production" 然...
开始配置之前:清空项目文件 一、路由基础配置 官网https://router.vuejs.org/zh/ 1.router/index.ts路由配置 importtype{App}from'vue'import{createRouter,createWebHistory}from'vue-router'importtype{RouteRecordRaw}from'vue-router'// 定义路由规则constroutes:RouteRecordRaw[]=[{path:'/',redirect:'/home...
找到tsconfig.app.json 这个文件,把他的include改为一个实际存在的空文件即可
从零构建vue3+ts项目:vite plugin与打包配置 一、Svg配置 每次引入一张SVG图片都需要写一次相对路径,并且对SVG图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader...
不上TS的话,打包过大的体积主要是Element、Vue以及moment等一下第三方插件,直接外部CDN引入,就能有效的减小体积了,参看Webpack外部引入Element和Vue 然而上了TS,再直接外部引入,会造成没有types文件,编辑器各种报错。现在还没明白TS的声明文件的原理,只能想别的办法了。
这里只是使用vue-cli 的预设配置打包出自己的ui组件库， 使用gulp导出类型定义。可以看到通过gulp我们可以分离 ts 编译文件 和 类型定义文件，只生产我们所需的目标文件。除了生产 umd 模块外， 如需要提供ES6 模块， 我们需要自己配置相关打包处理，可以参考 antdv 官方的打包方案。
vue3+vite+ts打包时报错 Ineffective mark-compacts near heap limit Allocation fAIled - JavaScript heap out of memory 解决办法: 1.yarn add increase-memory-limit cross-env --dev 2.在package.JSon的script中添加:"fix-memory-limit":"cross-env LIMIT=4096 increase-memory-limit" (这是4G的,如果不行可...
这里只是使用vue-cli 的预设配置打包出自己的ui组件库, 使用gulp导出类型定义。 可以看到通过gulp我们可以分离 ts 编译文件 和 类型定义文件,只生产我们所需的目标文件。 除了生产 umd 模块外, 如需要提供ES6 模块, 我们需要自己配置相关打包处理,可以参考antdv官方的打包方案。
我想做一个UI组件,然后使用的是Vue3+Vite+Ts+tailwindcss问题出现在这个静态资源这里,我的静态资源放在了src/assets下,包括图片还有style.css, @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,30...