vite下部分插件使用

Posted 2023-03-09

参考技术A 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';importElementPlusResolverfrom'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)],);

链接：https://www.jianshu.com/p/d45ae4b5c11a