Vue—— Vue3 + Node.js 后台管理系统之【工程化配置优化】-程序员充电站

背景问题

项目开发需要合适的工程化配置来提升开发效率和代码质量。

方案思考

如何配置构建工具
如何设置代码规范
如何自动化质量检查

具体实现

Vite配置优化：

// vite.config.ts - Vite配置优化import{defineConfig,loadEnv}from'vite';importvuefrom'@vitejs/plugin-vue';importvueJsxfrom'@vitejs/plugin-vue-jsx';import{resolve}from'path';exportdefaultdefineConfig(({mode})=>{constenv=loadEnv(mode,process.cwd(),'');return{plugins:[vue(),vueJsx(),// 代码压缩插件env.VITE_COMPRESS==='true'&&compressPlugin({ext:'.gz',deleteOriginFile:false,}),],resolve:{alias:{'@':resolve(__dirname,'src'),'@assets':resolve(__dirname,'src/assets'),'@components':resolve(__dirname,'src/components'),'@views':resolve(__dirname,'src/views'),}},server:{port:Number(env.VITE_PORT)||3000,open:true,// 自动打开浏览器proxy:{[env.VITE_API_PREFIX]:{target:env.VITE_API_TARGET,changeOrigin:true,rewrite:(path)=>path.replace(newRegExp(`^${env.VITE_API_PREFIX}`),''),},},},build:{rollupOptions:{output:{manualChunks:{// 拆分第三方库vendor:['vue','vue-router','pinia'],element:['element-plus'],utils:['@pureadmin/utils'],}}},chunkSizeWarningLimit:2000,// 增加警告阈值},// 预加载资源optimizeDeps:{include:['vue','vue-router','pinia','element-plus/es/components/form/style/css','element-plus/es/components/col/style/css',// ... 其他预加载的依赖]}};});

TypeScript配置：

// tsconfig.json - TypeScript配置{"compilerOptions":{// 基本配置"target":"ES2020","module":"ESNext","moduleResolution":"node","strict":true,"esModuleInterop":true,"skipLibCheck":true,"forceConsistentCasingInFileNames":true,// 路径映射"baseUrl":".","paths":{"@/*":["src/*"],"@assets/*":["src/assets/*"],"@components/*":["src/components/*"],"@views/*":["src/views/*"]},// 类型检查"noImplicitAny":true,"strictNullChecks":true,"strictFunctionTypes":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,// 输出配置"outDir":"./dist","declaration":true,"declarationMap":true,// Vue相关"jsx":"preserve","jsxImportSource":"vue"},"include":["src/**/*","types/**/*","vite.config.ts"],"exclude":["node_modules","dist"]}