1、vite-plugin-vue-setup-extend
解决vue3下 script setup语法糖 下 ，手动设置组件name不方便的问题
npm i vite-plugin-vue-setup-extend -D
在文件vite.config.ts中
importsetupExtendfrom'vite-plugin-vue-setup-extend';exportdefaultdefineConfig({plugins:[...setupExtend()],});
2、unplugin-auto-import
实现vue函数的自动导入,这样如ref, computed，watch等就不用手动导入了
npm i unplugin-auto-import-D
在文件vite.config.ts中
importAutoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[...AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[],dts:false}),],});
当前无效与eslint冲突，如果直接使用依然会报错
这里采用了全局eslint还需安装npm i eslint-plugin-auto-import -D
顾最终配置如下
在vite.config.ts文件中
exportdefault({mode})=>{returndefineConfig({plugins:[AutoImport({include:[/\.[tj]sx?$/,// .ts, .tsx, .js, .jsx/\.vue$/,/\.vue\?vue/,// .vue/\.md$/// .md],imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:'./auto-imports.d.ts',// eslint报错解决eslintrc:{// 此处为true运行后会生成.eslintrc-auto-import.json auto-imports.d.ts文件enabled:true,// 此处第一次运行使用true,之后改为falsefilepath:'./.eslintrc-auto-import.json',// Default `./.eslintrc-auto-import.json`globalsPropValue:true// Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')}}),Components({resolvers:[ElementPlusResolver()]}),],});};
在.eslintrc.js文件中
extends:[...'./.eslintrc-auto-import.json'],
在tsconfig.json文件中
compilerOptions: [ ... "types": ["element-plus/global"] ],"include": [..., "auto-imports.d.ts"],
3、unplugin-vue-components
实现vue组件库的自动按需导入,这样就不用手动导入了
npm i unplugin-vue-components -D
在文件vite.config.ts中
importAutoImportfrom'unplugin-auto-import/vite';importComponentsfrom'unplugin-vue-components/vite';import{ElementPlusResolver}from'unplugin-vue-components/resolvers';exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:['vue','vue-router',{vuex:['useStore']}],resolvers:[ElementPlusResolver()],dts:false}),Components({resolvers:[ElementPlusResolver()]}),]});
4、vite-plugin-compression
静态资源压缩
npm i vite-plugin-compression -D
在文件vite.config.ts中
// 静态资源压缩importviteCompressionfrom'vite-plugin-compression';exportdefaultdefineConfig({plugins:[...viteCompression({verbose:true,disable:false,// 不禁用压缩deleteOriginFile:false,// 压缩后是否删除原文件threshold:10240,// 压缩前最小文件大小algorithm:'gzip',// 压缩算法ext:'.gz'// 文件类型})],});
5、rollup-plugin-visualizer
打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系
npm i rollup-plugin-visualizer -D
在文件vite.config.ts中
importvisualizerfrom'rollup-plugin-visualizer';exportdefaultdefineConfig({plugins:[...visualizer({// 打包后自动打开分析报告open:true})],});
作者：新世界的冒险
链接：//www.greatytc.com/p/d45ae4b5c11a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
