vite下部分插件使用

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})],})

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

由于vite 官网对于postcss的描述过少，导致我在配置的时候出现了一些错误：在vite config里面使用标准的postcss配置

首先在外部创建postcss.config.js用我们熟悉的写法是可以的，但是我们的目的是在vite.config.js里面配置。

我们首先需要导入使用的插件，任何导入方式都是会被转化为es模块，然后初始化插件及配置项后，放入plugins数组里面就可以正常使用；

---