Vue CLI 3的Vue.config.js

module.exports = {
  // 部署應用包時的基本URL。 
  // https://www.app.com/ => '/'
  // https://www.app.com/my-app/ => '/my-app/'
  // 若是值爲空字符串 '' 或者是相對路徑 './', 都會被連接爲相對路徑
  baseUrl: process.env.NODE_ENV === 'production' ? '/' : '/',
  // 生成環境構建文件的目錄。構建時傳入 --no-clean 可關閉該行爲
  outputDir: 'dist',
  // 放置生成的靜態資源(js, css, img, fonts)d的(相對於 outputDir 的)目錄
  assetsDir: '',
  // 指定生成的 index.html 的輸出路徑 (相對於 outputDir ).也能夠是一個絕對路徑
  indexPath: 'index.html',
  // 生成的靜態資源在它們的文件名中包含了hash以便更好的控制緩存。
  // 若是你沒法使用Vue CLI生成的 index THML,你能夠經過將這個選項設爲 false 來關閉文件名哈希
  filenameHashing: true,
  pages: {
    index: {
      // 頁面入口
      entry: 'src/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'hello-world',
      // 在這個頁面中包含的塊，默認狀況下會包含提取出來的通用 chunk 和 vendor chunk
      chunks: [ 'chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 而且若是找不到的話，就回退到 `public/index.html`
    // 輸出文件名會被推導爲 `subpage.html`
    subpage: 'src/main.js'
  },
  // 在生成構建時禁用 eslint-loader
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含運行時編譯器的Vue構建版本, 
  // 設置爲 true 後你就能夠在 Vue 組件中使用 template 選項了，可是這會讓你的應用額外增長 10kb 左右
  runtimeCompiler: false,
  // 默認狀況下 babel-loader 會忽略全部 node_modules 中的文件。若是你想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來
  transpileDependencies: [],
  // 若是你不須要生產環境的 source map, 能夠將其設置爲 false 以加速生產環境構建
  productionSourceMap: true,
  // 設置生產的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性
  // 須要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標籤 - 直接寫在模板 (public/index.html) 中的標籤不受影響
  crossorigin: undefined,
  integrity: false,
  // 值若是是一個對象，則會經過 webpack-merge 合併到最終的配置中
  // 值若是是一個函數，則會接收被解析的配置做爲參數。
  // 該函數及能夠修改配置並不返回任何東西，也能夠返回一個被克隆或合併過的配置版本。
  // configureWebpack: {
  //   plugins: [
  //     new MyAwesomeWebpackPlugin()
  //   ]
  // },
  configureWebpack: config => {
    if (production.env.NODE_ENV === 'production') {
      // 爲生產環境修改配置...
    } else {
      // 爲開發環境修改配置...
    }
  },
  // 鏈式操做 Vue CLI內部的 webpack 配置是經過 webpack-chain 維護的。
  // 這個庫提供了一個 webpack 原始配置的上層抽象，使其能夠定義具名的 loader 規則和具名插件，並有機會在後期進入這些規則並對它們的選項進行修改
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的選項
          return options
        })
  },
  // 若是想在 js 中做爲 CSS Modules 導入 CSS 或其餘預處理文件，該文件應該以 *.module.(css|less|sass|scss|styl) 結尾
  // import styles from './foo.module.css'
  // import sassStyles from './foo.module.scss'
  //  若是你想去掉文件名的 .module, 能夠設置 vue.config.js 中的 css.modules 爲 true
  css: {
    module: true,
    // 提取 CSS 在開發環境模式下是默認不開啓的，由於它和 CSS 熱重載不兼容。
    // 然而，你仍然能夠將這個值顯性地設置爲 true 在全部狀況下都強制提取
    expert: production.env.NODE_ENV === 'production' ? true : false,
    // 是否爲 CSS 開啓 source map。設置爲 true 以後可能會影響構建的性能
    sourceMap: false,
    // 向 CSS 相關的 loader 傳遞選項
    loaderOptions: {
      css: {
        // 這裏的選項會傳遞給 css-loader
      },
      postcss: {
        // 這裏的選項會傳遞給 postcss-loader
      },
      sass: {
        // 因此這個假設你有 `src/variables.scss`
        // data: `@import "@/variables.scss";`
      }
    }
  },
  devServer: {
    // 在設置讓瀏覽器 overlay 同時顯示警告和錯誤
    overlay: {
      warnings: true,
      errors: true
    },
    proxy: {
      // '/api': {
      //   target: '<url>',
      //   ws: true,
      //   changeOrigin: true
      // },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
  },
  // 是否爲 Babel 或 TypeScript 使用 threa-loader。
  // 該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建
  parallel: require('os').cpus().length > 1,
  pwa: {
    // 'GenerateSW'(默認), 每次重建 web 應用程序時都會生成一個新的服務工做文件。
    // 'InjectManifest' 容許您從現有的服務工做文件開始，並建立該文件的副本，
    // 並在其中注入 "預先緩存清單"
    workboxPluginMode: 'GenerateSW',
    // workboxOptions:{
    //  swSrc: 'dev/sw.js'
    // }
    // 默認值："名稱"字段 package.json 
    // 用做 apple-mobile-web-app-title 生成的 HTML 中元標記的值。請注意，您須要進行編輯 public/manifest.json 才能與之匹配
    // name: '',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'no',
    appleMobileWebAppStatusBarStyle: 'default',
    // 若是您須要根據瀏覽器的緩存想 NOT 和 manifest 添加版本，則使用此選項。
    // 這將附加 ?v=<pwa.assetsVersion> 到圖標和清單的 URL 。
    assetsVersion: '',
    // 應用程序清單的路徑
    manifestPath: 'manifest.json',
    iconPaths: {
      favicon32: 'img/icons/favicon-32x32.png',
      favicon16: 'img/icons/favicon-16x16.png',
      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
      maskIcon: 'img/icons/safari-pinned-tab.svg',
      msTileImage: 'img/icons/msapplication-icon-144x144.png',
    },
  },
  // 這是一個不進行任何 schema(模式) 驗證的對象，所以它能夠用來傳遞任何第三方插件選項。
  pluginOptions: {
    foo: {
      // 插件能夠做爲 `options.pluginOptions.foo` 訪問這些選項
    }
  }
}

 具體的能夠去查看官網