vue cli3 vue.config.js 配置詳情

module.exports = {
  // 基本路徑
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : '/',
  // 輸出文件目錄
  outputDir: 'dist', // 默認dist
  // 用於嵌套生成的靜態資產（js,css,img,fonts）目錄
  // assetsDir: '',
  // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑
  indexPath: 'index.html', // Default: 'index.html'
  filenameHashing: true,
  // 構建多頁時使用 
  pages: undefined,
  // eslint-loader是否在保存的時候檢查
  lintOnSave: true,
  // 是否使用包含運行時編譯器的Vue核心的構建
  runtimeCompiler: false,
  // 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來
  transpileDependencies: [],
  // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
  productionSourceMap: false,
  // 如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中。如果這個值是一個函數，則會接收被解析的配置作為參數。該函數及可以修改配置並不返回任何東西，也可以返回一個被克隆或合並過的配置版本。
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
    } else {
      // 為開發環境修改配置...
    }
  },
  // 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。
  chainWebpack: config => {
    /*config.module
      .rule('images')
      .use('url-loader')
        .loader('url-loader')
        .tap(options => {
          // 修改它的選項...
          return options
        })*/
  },
  // css相關配置
  css: {
    // 啟用 CSS modules
    modules: false,
    // 是否使用css分離插件
    extract: true,
    // 開啟 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {},
  },
  // webpack-dev-server 相關配置
  devServer: {
    host: '0.0.0.0',
    port: 8080,
    https: false,
    open: true,
    hotOnly: false,
    proxy: null, // 設置代理
    before: app => {},
  },
  // PWA 插件相關配置
  pwa: {},
  // 第三方插件配置
  pluginOptions: {
  // ...
  }
}