Vue—— Vue3 + Node.js 后台管理系统 之 【工程化配置优化】

背景问题

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

方案思考

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

具体实现

Vite配置优化：

// vite.config.ts – Vite配置优化
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from 'path';

export default defineConfig(({ mode }) => {
const env = 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(new RegExp(`^${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"
]
}

效果验证

通过合理的工程化配置，可以提升开发效率和代码质量。

经验总结

工程化配置是项目成功的基石，需要根据项目特点进行合理配置。