《95%開發者不知道的vue.config.js高階玩法》手撕Webpack配置鏈/SSR優化/多頁應用，3倍構建效率實戰方案详情 - 前端,typescript,vue.js,webpack,visual-studio-code 月半大熊貓日志

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分析包體積

圖片3.png

Reference：

Webpack 官方文檔：https://webpack.js.org/

Vue CLI 配置參考：https://cli.vuejs.org/config/

webpack-chain 文檔：https://github.com/neutrinojs/webpack-chain