Vue工程化配置指南：vue.config.js深度解析
一、初始化配置文件
在Vue CLI工程根路径下创建配置文件：
项目层级示意：
your-project/
├── src/
├── public/
├── package.json
└── vue.config.js # 新增配置文件
基本模板结构：
module.exports = {// 工程化配置区域
}
二、核心配置参数解析
部署路径设置（publicPath）
功能说明：控制静态资源访问路径
预设值：开发环境'/'，生产环境'/'
环境适配方案：
publicPath: process.env.NODE_ENV === 'production' ? '/cdn-path/' : '/dev-path/'
构建产物路径（outputDir）
功能说明：指定编译输出目录
默认路径：'dist'
自定义示例：
outputDir: 'release'
资源存储路径（assetsDir）
功能说明：静态资源子目录设置
初始值：空字符串
配置案例：
assetsDir: 'assets'
三、开发环境调优
本地服务配置模板：
devServer: {host: '0.0.0.0', // 开放IP访问hotOnly: true, // 热更新控制proxy: { // 接口代理'/gateway': {target: 'http://api.domain.com',ws: true,secure: false}}
}
四、Webpack深度定制
链式配置方法（chainWebpack）
应用场景：模块规则扩展
SVG图标处理案例：
chainWebpack: config => {config.module.rule('custom-svg').test(/\.svg$/).use('svg-loader').loader('svg-sprite-loader')
}
配置融合方法（configureWebpack）
功能特性：支持对象合并或函数式覆盖
生产环境专用配置：
configureWebpack: config => {if (process.env.NODE_ENV === 'production') {config.optimization.minimizer = [new TerserPlugin()]}
}
五、进阶工程配置
样式预处理配置
css: {modules: true, // 启用CSS模块化loaderOptions: {less: {globalVars: {primaryColor: '#1890ff'}}}
}
多入口方案
pages: {mobile: {entry: 'src/mobile-entry.js',chunks: ['vendor', 'mobile']},desktop: {entry: 'src/desktop-entry.js',chunks: ['vendor', 'desktop']}
}
构建优化策略
{filenameHashing: false, // 关闭哈希文件名runtimeCompiler: true, // 启用运行时编译transpileDependencies: ['vuex-persist'] // 特殊依赖转译
}
配置系统运作原理
- 配置叠加机制
采用webpack-chain实现配置链式管理
用户配置优先级高于CLI默认配置
数组合并策略为覆盖式而非追加式
- 环境变量注入流程
.env.local → .env.[mode] → 全局默认
- 构建过程阶段划分
基础配置（Base Config）
客户端构建（Client Build）
服务端渲染（SSR Build）
现代模式构建（Modern Build）
企业级配置参考
const path = require('path')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {publicPath: './',outputDir: 'dist',assetsDir: 'static',lintOnSave: process.env.NODE_ENV === 'development',productionSourceMap: false,devServer: {port: 8080,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: { '^/api': '' }}}},chainWebpack: config => {config.resolve.alias.set('@', resolve('src'))},configureWebpack: {plugins: [// 自定义插件]},css: {extract: true,loaderOptions: {scss: {additionalData: `@import "~@/styles/variables.scss";`}}}
}导出完整webpack配置
vue inspect --mode=stage > debug.config.js
查看特定规则配置
vue inspect module.rules.10
关键注意点
路径别名推荐使用@指向src目录
生产环境建议关闭sourcemap提升安全性
大文件加载推荐配置externals进行CDN引入
定期运行vue-cli-service build --report分析包体积
Reference：
Webpack 官方文档：https://webpack.js.org/
Vue CLI 配置参考：https://cli.vuejs.org/config/
webpack-chain 文档：https://github.com/neutrinojs/webpack-chain
