說明

vue.config.js 是一個可選的配置檔案，如果專案的 (和 package.json 同級的) 根目錄中存在這個檔案，那麼它會被 @vue/cli-service 自動載入。

  module.exports = {
    // 配置項...
  }

• publicPath
  預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設定 publicPath 為 /my-app/。
• outputDir
  打包完成後，構建檔案所放置的目錄。預設為dist
• assetsDir
  放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。
• indexPath
  指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。
• filenameHashing
  是否關閉檔名雜湊。預設時開啟
• pages

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個頁面中包含的塊，預設情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 並且如果找不到的話，就回退到 `public/index.html`。
    // 輸出檔名會被推導為 `subpage.html`。
    subpage: 'src/subpage/main.js'
  }
}
 

• lintOnSave
  取值 boolean | 'warning' | 'default' | 'error' 可以配置ESlint的報錯

  boolean	warning	default	error
  是否開啟eslint	將 lint 錯誤輸出為編譯警告	lint 錯誤在開發時直接顯示在瀏覽器中	把 lint 警告也輸出為編譯錯誤

• runtimeCompiler
  設定為 true 後你就可以在 Vue 元件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。

• transpileDependencies
  預設情況下 babel-loader

  會忽略所有 node_modules 中的檔案。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來。
  處理一些相容性問題可能會用到

• productionSourceMap
  生產環境的 source map

• crossorigin
  設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 crossorigin 屬性。

  crossorigin獲取跨域指令碼的錯誤資訊
  需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標籤 - 直接寫在模版 (public/index.html) 中的標籤不受影響。

• integrity
  設定生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標籤的 integrity 屬性。

  驗證資源的完整性 https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
  需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標籤 - 直接寫在模版 (public/index.html) 中的標籤不受影響。

• configureWebpack
  webpack的配置。會合併到最終的配置中。

  1. 新增外掛

• chainWebpack
  通過 webpack-chain維護的配置。允許更細粒度的控制內部的配置。

  1. 修改某些Loader選項
  2. 新增新的Loader
  3. 替換loader
  4. 修改外掛選項

• css.requireModuleExtension
  預設情況下，只有 *.module.[ext] 結尾的檔案才會被視作 CSS Modules 模組。設定為 false 後你就可以去掉檔名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 檔案視為 CSS Modules 模組。

• extract
  是否將元件中的 CSS 提取至一個獨立的 CSS 檔案中、預設 生產環境下是 true，開發環境下是 false

• sourceMap
  是否為 CSS 開啟 source map。 預設為 false

• loaderOptions
  向 CSS 相關的 loader 傳遞選項

• devServer
  開發過程中接觸最多的配置項。同時功能也很強大。支援所有webpack-dev-server的配置項
  配置項： https://webpack.js.org/configuration/dev-server/

• parallel
  是否為 Babel 或 TypeScript 使用 thread-loader

• pwa
  漸進式 Web 應用會 在桌面和移動裝置上提供可安裝的、仿應用的體驗，可直接通過 Web 進行構建和交付。它們是快速、可靠的 Web 應用。最重要的是，它們是適用於任何瀏覽器的 Web 應用。
  該選項就是向傳遞pwa外掛的一些配置項

  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'dev/sw.js',
      // ...other Workbox options...
    }
  }

    // 安裝
    vue add pwa
    // 使用
    config.plugin('workbox')

• pluginOptions
  用來傳遞任何第三方外掛選項。
  外掛可以作為 options.pluginOptions.xxx 訪問這些選項。

參考 vue.js 官網。