本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
随着
vite.config.ts配置越来越多不单单有plugins还有build、server、css等诸多配置，导致维护时很难找到相对应的配置，本章将对vite.config.ts配置进行优化。拆分出独立配置文件。
推荐阅读
vite.config.ts 之 Plugins 篇 (三)
优化
vite.config.ts在根目录创建结构为config\plugins\index.ts的文件，添加createVitePlugins方法。看到这里大概能猜出来createVitePlugins方法是干什么的了，然后我们将vite.config.ts下的plugins配置转移到createVitePlugins方法中。
- 第一步
//index.ts
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import compressPlugin from 'vite-plugin-compression'
import viteImagemin from 'vite-plugin-imagemin'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'
import AutoImport from 'unplugin-auto-import/vite'
export function createVitePlugins(isBuild: boolean) {
return [
vue(),
vueSetupExtend(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
}),
compressPlugin({
verbose: false, // 是否在控制台输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 文件容量大于这个值进行压缩，它将被压缩，单位为b
algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
ext: '.gz', // 生成的压缩包后缀
}),
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 20,
},
pngquant: {
quality: [0.8, 0.9],
speed: 4,
},
svgo: {
plugins: [
{
name: 'removeViewBox',
},
{
name: 'removeEmptyAttrs',
active: false,
},
],
},
}),
Components({
dirs: ['src/components'],
resolvers: [ElementPlusResolver()],
// 组件的有效文件扩展名。
extensions: ['vue'],
// 允许子目录作为组件的命名空间前缀。
directoryAsNamespace: false,
deep: true,
}),
createStyleImportPlugin({ resolves: [ElementPlusResolve()] }),
AutoImport({
imports: ['vue'],
resolvers: [ElementPlusResolver({ importStyle: false })],
}),
]
}
在根目录创建结构为
config\index.ts文件，将createVitePlugins的方法导入到这个文件中，然后在导出,这里看起来很麻烦感觉多此一举。原因是Vite中不仅仅有plugins还会有更多配置，后续有更多配置时都会从这个文件中导出，代码看起来就很干净了。
- 第二步
// config\index.ts
import { createVitePlugins } from './plugins'
export { createVitePlugins }
- 配置
// vite.config.ts
import { UserConfig, ConfigEnv } from 'vite'
import { createVitePlugins } from './config'
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfig => {
const isBuild = command === 'build'
return {
plugins: createVitePlugins(isBuild),
}
}
- 解决开发工具报错问题
删除
tsconfig.json中references配置项tsconfig.node.json文件也可以删除掉。更新include配置项
代码如下：
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext","dom"],
"skipLibCheck": true, // 解决打包报`vue-tsc --noEmit && vite build`的错,忽略所有的声明文件(*.d.ts)的类型检查
},
"include": [
"config/**/*.ts",
"config/**/*.d.ts",
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"vite.config.ts",
],
// ts 排除的文件
"exclude": [
"node_modules",
"dist"
],
}
运行
npm run dev
打包
npm run build
生成目录
npm install --global treer
treer -e ./result.md -i "/node_modules|git|dist/"
本章最终目录如下：
├─auto-imports.d.ts
├─components.d.ts
├─index.html
├─package.json
├─pnpm-lock.yaml
├─README.md
├─tsconfig.json
├─vite.config.ts
├─src
| ├─App.vue
| ├─env.d.ts
| ├─main.ts
| ├─components
| | └HelloWorld.vue
| ├─assets
| | └logo.png
├─public
| └favicon.ico
├─config
| ├─index.ts
| ├─plugins
| | └index.ts
├─.vscode
| ├─extensions.json
| └settings.json
继续学习
废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇🙇🙇。
