Vue CLI 把 webpack、babel、postcss、dev-server 等工具链封装成「零配置」工具，但真实项目总有「自定义 loader、路径别名、代理转发、多环境差异」等需求。本文围绕一份渐进式的 vue.config.js，从本地开发到线上部署，逐条拆解每个配置项使用方法。

一、本地开发：devServer

1.反向代理跨域

• changeOrigin 解决后端对 Host 头的校验；
• pathRewrite 把 /api/user 转成 /user，保持前端路径语义清晰。

2.mock 服务

before 钩子在 webpack-dev-server 启动后执行，可在同端口启动本地 mock，无需额外服务。

二、构建输出：publicPath、outputDir、assetsDir

• publicPath 决定 HTML 中资源引用的前缀；
• outputDir 是打包后文件夹名称；
• assetsDir 把 js / css / img 统一放到 static 子目录，方便 CDN 缓存。

三、运行时编译：runtimeCompiler 的利与弊

默认构建产物不包含模板编译器，体积减少 10 KB+。

若需在客户端使用 template 字符串，需显式开启：

代价是包变大、运行时性能下降，仅推荐后台管理系统或低代码平台开启。

四、按需转译：transpileDependencies 的深度用法

CLI 默认只转译 src 内的代码。当依赖包包含 ES6+ 语法且未提供 ES5 产物时，需要手动加入白名单：

可显著减少 Babel 工作量，避免把 node_modules 全量拖慢构建。

五、深度定制：configureWebpack vs chainWebpack

1.configureWebpack：直接合并

写法简单，但会覆盖同名配置，适合添加别名、plugin。

2.chainWebpack：链式修改

链式 API 粒度更细，可精准删除、替换 loader/plugin，适合高级场景。

六、CSS 模块化：requireModuleExtension 与 loaderOptions

关闭扩展名后，所有 .scss 文件默认启用 CSS Modules；prependData 全局注入变量，避免每个文件重复 @import。

七、Babel、ESLint、PostCSS

• babel.config.js：CLI 只识别根目录文件，可配合 @babel/preset-env 的 useBuiltIns: 'usage' 自动 polyfill。
• .eslintrc.js：使用 @vue/eslint-config-prettier 一键集成格式化；lintOnSave: false 可关闭保存时检查。
• postcss.config.js：通过 autoprefixer、postcss-pxtorem 实现自动前缀与 px 转 rem。

八、多环境差异化

结合「模式与环境变量」机制，可在 vue.config.js 内动态返回配置：

配合 .env.staging、.env.production，实现「本地开发用根路径，预发用 CDN，生产用 OSS」。

完整示例