vite.config.ts配置 // https://vitejs.dev/config/exportdefaultdefineConfig({// ...build:{// 10kb以下,转Base64assetsInlineLimit:1024*10,// chunkSizeWarningLimit: 1500,//配置文件大小提醒限制,默认500rollupOptions:{output:{// 每个node_modules模块分成一个js文件manualChunks(id:string){if(id.inclu...
2、配置tsconfig.json (你都用@了别告诉我没在vite配置,这里不说@配置) compilerOptions里添加 "baseUrl":".","paths": {"@/*": ["src/*"] } 不报错了 四、vite打包分类文件输出配置以及静态资源拆分【配置】 直接打包后所有累心文件都存在一个文件内 1.文件分类输出,干净整洁舒心 配置一下config.ts文...
1、base配置打包公共路径 打开package.json 做项目时可以不去掉 好了,在以上你构建了vite,并配置了最简单的操作后,你准备配置vite.confing.ts 开发环境下我们的图片位置在/src,ok,本地没问题正常显示,你打了个包 (npm run build),然后又运行了npm脚本preview, 也没问题,但是在一些服务器上,使用绝对目录会导致4...
2.创建vue+ts 项目 yarn create vite --template vue-ts yarn yarn dev 3.vite 配置 @ 快速访问 ...
项目技术栈:vue3 + vite + ts + ant design vue 既然这样,那就开始打包优化吧。打包分析,结果如下: 第一步,ant-design-vue由全量引入改为按需引入。 修改前: import type { App } from 'vue'; import { Button } from './Button'; import { Input, Layout,Table,Pagination } from 'ant-design-vue...
build:{outDir:"lib",//输出文件名称lib:{entry:path.resolve(__dirname,"./src/plugins/index.ts"),//指定组件编译入口文件name:"vue-msg",fileName:"vue-msg",},//库编译模式配置rollupOptions:{// 确保外部化处理那些你不想打包进库的依赖external:["vue"],output:{// 在 UMD 构建模式下为这些外部...
使用方法：在`vite.config.ts`中添加打包配置 importexternalGlobalsfrom'rollup-plugin-external-globals';...
开始配置之前:清空项目文件 一、路由基础配置 官网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...
最近项目的技术栈转到vue3 + vite + ts,有着一定的定制化构建需求,因此才有了以下实践。 目录结构 目前的构建需求是:一套配置+多模块页面输出。目录结构大致如下: ├─.vscode ├─dist │ ├─one // 打包后的页面1 │ └─two // 打包后的页面2 ...