Vue CLI相关配置

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

一、本地开发：devServer

1.反向代理跨域

js 复制代码

module.exports = {
  devServer: {
    port: 9527,
    host: '0.0.0.0',
    proxy: {
      '/api': {
        target: 'http://backend.test',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

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

2.mock 服务

js 复制代码

before: require('./mock/mock-server.js')

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

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

js 复制代码

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? 'https://cdn.example.com/'
    : '/',
  outputDir: 'dist',
  assetsDir: 'static'
}

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

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

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

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

js 复制代码

runtimeCompiler: true

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

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

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

js 复制代码

transpileDependencies: [
  'swiper',            // 包名
  /@some-scope\/.*/    // 正则匹配一个 scope
]

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

五、深度定制：configureWebpack vs chainWebpack

1.configureWebpack：直接合并

js 复制代码

configureWebpack: {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@api': path.resolve(__dirname, 'src/api')
    }
  }
}

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

2.chainWebpack：链式修改

js 复制代码

chainWebpack: config => {
  config.plugin('define').tap(args => {
    args[0]['process.env.CUSTOM'] = JSON.stringify(process.env.CUSTOM)
    return args
  })
}

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

六、CSS 模块化：requireModuleExtension 与 loaderOptions

js 复制代码

css: {
  requireModuleExtension: false,  // 去掉 *.module.css 强制后缀
  loaderOptions: {
    scss: {
      prependData: `@import "~@/styles/variables.scss";`
    }
  }
}

关闭扩展名后，所有 .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 内动态返回配置：

js 复制代码

module.exports = {
  publicPath: process.env.VUE_APP_CDN || '/',
  productionSourceMap: process.env.NODE_ENV !== 'production'
}

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

完整示例

js 复制代码

const path = require('path')
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  runtimeCompiler: false,
  transpileDependencies: ['swiper'],
  devServer: {
    port: 8080,
    proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } }
  },
  css: {
    requireModuleExtension: false,
    loaderOptions: { scss: { prependData: `@import "~@/styles/var.scss";` } }
  },
  configureWebpack: {
    resolve: { alias: { '@': path.resolve(__dirname, 'src') } }
  },
  chainWebpack: config => {
    // 移除预加载，减少首屏请求
    config.plugins.delete('preload')
  }
}