1. 程式人生 > >vue cli3 vue.config.js 配置詳情

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: {
  // ...
  }
}