1. publicPath

默認(rèn)值：'/'

說(shuō)明：部署應(yīng)用包時(shí)的基本 URL，例：https://www.my-app.com/my-app/，則設(shè)置 publicPath 為 /my-app/

提示：1. 當(dāng)使用基于 HTML5 history.pushState 的路由時(shí) 2.當(dāng)使用 pages 選項(xiàng)構(gòu)建多頁(yè)面應(yīng)用時(shí)。

2. outputDir

默認(rèn)值：'dist'

說(shuō)明：打包目錄。

提示：目標(biāo)目錄在構(gòu)建之前會(huì)被清除 (構(gòu)建時(shí)傳入 --no-clean 可關(guān)閉該行為)。

3. assetsDir

默認(rèn)值：''

說(shuō)明：放置生成的靜態(tài)資源 (js、css、img、fonts) 的 (相對(duì)于 outputDir 的) 目錄。

注意：從生成的資源覆寫(xiě) filename 或 chunkFilename 時(shí)，assetsDir 會(huì)被忽略。

4. indexPath

默認(rèn)值：'index.html'

說(shuō)明：指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑。

5. pages

默認(rèn)值：undefined

說(shuō)明：在 multi-page 模式下構(gòu)建應(yīng)用。每個(gè)“page”應(yīng)該有一個(gè)對(duì)應(yīng)的 JavaScript 入口文件。

注意：其值應(yīng)該是一個(gè)對(duì)象，對(duì)象的 key 是入口的名字，value 是：1.一個(gè)指定了 entry, template, filename, title 和 chunks 的對(duì)象 (除了 entry 之外都是可選的)；2.或一個(gè)指定其 entry 的字符串。

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "src/index/main.js",
      // 模板來(lái)源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話(huà)，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: "src/subpage/main.js",
  },
};

6. lintOnSave

默認(rèn)值：true

說(shuō)明：是否在開(kāi)發(fā)環(huán)境下通過(guò) eslint-loader 在每次保存時(shí) lint 代碼。

7. devServer

Type：String

說(shuō)明：devServer.proxy 可以是一個(gè)指向開(kāi)發(fā)環(huán)境 API 服務(wù)器的字符串

module.exports = {
  devServer: {
    proxy: "http://localhost:4000",
  },
};

8. chainWebpack

Type: Function

說(shuō)明：是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-511491.html

9. 例子

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  // 默認(rèn)：'/',部署應(yīng)用包時(shí)的基本 URL，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上，如果是部署在一個(gè)子路徑上，比如在https://www.my-app.com/my-app/，則設(shè)置publicPath: /my-app/。這個(gè)值也可以被設(shè)置為空字符串 ('') 或是相對(duì)路徑 ('./')，這樣所有的資源都會(huì)被鏈接為相對(duì)路徑，方便遷移。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 默認(rèn)：'dist', 當(dāng)運(yùn)行vue-cli-service build時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄。注意目標(biāo)目錄在構(gòu)建之前會(huì)被清除 (構(gòu)建時(shí)傳入--no-clean 可關(guān)閉該行為)。
  outputDir: "dist",
  // 默認(rèn)：'', 放置生成的靜態(tài)資源 (js、css、img、fonts)的 (相對(duì)于 outputDir 的) 目錄
  assetsDir: "",
  // 默認(rèn)：'index.html', 指定生成的index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑。
  indexPath: "index.html",
  // 默認(rèn)：true, 默認(rèn)情況下，生成的靜態(tài)資源在它們的文件名中包含了hash 以便更好的控制緩存。然而，這也要求index的 HTML 是被 Vue CLI自動(dòng)生成的。如果你無(wú)法使用 Vue CLI 生成的 index HTML，你可以通過(guò)將這個(gè)選項(xiàng)設(shè)為false 來(lái)關(guān)閉文件名哈希。
  filenameHashing: true,
  // 默認(rèn)：undefined, 在 multi-page 模式下構(gòu)建應(yīng)用。每個(gè)“page”應(yīng)該有一個(gè)對(duì)應(yīng)的 JavaScript 入口文件。其值應(yīng)該是一個(gè)對(duì)象，對(duì)象的 key 是入口的名字，value 可以是對(duì)象或字符串，類(lèi)似：
  pages: {
    index: {
      // page 的入口
      entry: "src/index/main.js",
      // 模板來(lái)源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話(huà)，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: "src/subpage/main.js",
  },
  // 默認(rèn)：default (可選值：‘warning’ | ‘default’ | ‘error’), 是否在開(kāi)發(fā)環(huán)境下通過(guò)eslint-loader在每次保存時(shí)lint代碼。這個(gè)值會(huì)在 @vue/cli-plugin-eslint被安裝之后生效。
  lintOnSave: default,
  // 默認(rèn)：false, 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為 true 后你就可以在 Vue 組件中使用 template選項(xiàng)了，但是這會(huì)讓你的應(yīng)用額外增加 10kb 左右。
  runtimeCompiler: false,
  // 默認(rèn)：[], 默認(rèn)情況下babel-loader會(huì)忽略所有 node_modules中的文件。如果你想要通過(guò) Babel 顯式轉(zhuǎn)譯一個(gè)依賴(lài)，可以在這個(gè)選項(xiàng)中列出來(lái)。
  transpileDependencies: [],
  // 默認(rèn)：true, 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為false 以加速生產(chǎn)環(huán)境構(gòu)建。
  productionSourceMap: true,
  // 默認(rèn)：undefined, 設(shè)置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標(biāo)簽的 crossorigin 屬性。
  crossorigin: undefined,
  // 默認(rèn)：false, 在生成的 HTML 中的<link rel="stylesheet"> 和<script>標(biāo)簽上啟用Subresource Integrity (SRI)。如果你構(gòu)建后的文件是部署在 CDN 上的，啟用該選項(xiàng)可以提供額外的安全性。
  integrity: false,
  // 如果這個(gè)值是一個(gè)對(duì)象，則會(huì)通過(guò) webpack-merge合并到最終的配置中。
  // 如果這個(gè)值是一個(gè)函數(shù)，則會(huì)接收被解析的配置作為參數(shù)。該函數(shù)既可以修改配置并不返回任何東西，也可以返回一個(gè)被克隆或合并過(guò)的配置版本。
  // 調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象
  // 該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。
  // 有些 webpack 選項(xiàng)是基于 vue.config.js 中的值設(shè)置的，所以不能直接修改。例如你應(yīng)該修改 vue.config.js 中的 outputDir 選項(xiàng)而不是修改 output.path；你應(yīng)該修改 vue.config.js 中的 publicPath 選項(xiàng)而不是修改 output.publicPath。這樣做是因?yàn)?vue.config.js 中的值會(huì)被用在配置里的多個(gè)地方，以確保所有的部分都能正常工作在一起。
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  // 如果你需要基于環(huán)境有條件地配置行為，或者想要直接修改配置，那就換成一個(gè)函數(shù) (該函數(shù)會(huì)在環(huán)境變量被設(shè)置之后懶執(zhí)行)。該方法的第一個(gè)參數(shù)會(huì)收到已經(jīng)解析好的配置。在函數(shù)內(nèi)，你可以直接修改配置，或者返回一個(gè)將會(huì)被合并的對(duì)象：
  //   configureWebpack: config => {
  //     if (process.env.NODE_ENV === 'production') {
  //       // 為生產(chǎn)環(huán)境修改配置...
  //     } else {
  //       // 為開(kāi)發(fā)環(huán)境修改配置...
  //     }
  //   }
  // });
  // 是一個(gè)函數(shù)，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig實(shí)例。允許對(duì)內(nèi)部的webpack配置進(jìn)行更細(xì)粒度的修改。
  // Vue CLI 內(nèi)部的 webpack 配置是通過(guò) webpack-chain 維護(hù)的。這個(gè)庫(kù)提供了一個(gè) webpack 原始配置的上層抽象，使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對(duì)它們的選項(xiàng)進(jìn)行修改。
  // 它允許我們更細(xì)粒度的控制其內(nèi)部配置。接下來(lái)有一些常見(jiàn)的在 vue.config.js 中的 chainWebpack 修改的例子。
  // 當(dāng)你打算鏈?zhǔn)皆L(fǎng)問(wèn)特定的 loader 時(shí)，vue inspect 會(huì)非常有幫助。
  // 對(duì)于 CSS 相關(guān) loader 來(lái)說(shuō)，我們推薦使用 css.loaderOptions 而不是直接鏈?zhǔn)街付?loader。這是因?yàn)槊糠N CSS 文件類(lèi)型都有多個(gè)規(guī)則，而 css.loaderOptions 可以確保你通過(guò)一個(gè)地方影響所有的規(guī)則。
  chainWebpack: config  => {
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你還可以再添加一個(gè) loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  },
  // 如果你想要替換一個(gè)已有的基礎(chǔ) loader，例如為內(nèi)聯(lián)的 SVG 文件使用 vue-svg-loader 而不是加載這個(gè)文件：
  // chainWebpack: config => {
  //   const svgRule = config.module.rule('svg')

  //   // 清除已有的所有 loader。
  //   // 如果你不這樣做，接下來(lái)的 loader 會(huì)附加在該規(guī)則現(xiàn)有的 loader 之后。
  //   svgRule.uses.clear()

  //   // 添加要替換的 loader
  //   svgRule
  //     .use('vue-svg-loader')
  //       .loader('vue-svg-loader')
  // }

  css: {
    // 默認(rèn)：true, 默認(rèn)情況下，只有 *.module.[ext]結(jié)尾的文件才會(huì)被視作CSS Modules 模塊。設(shè)置為 false后你就可以去掉文件名中的.module并將所有的 *.(css|scss|sass|less|styl(us)?)文件視為 CSS Modules模塊。
    // 如果你在 css.loaderOptions.css里配置了自定義的 CSS Module選項(xiàng)，則 css.requireModuleExtension必須被顯式地指定為true或者false，否則我們無(wú)法確定你是否希望將這些自定義配置應(yīng)用到所有 CSS文件中。
    requireModuleExtension: true,
    // 默認(rèn)：生產(chǎn)環(huán)境下是 true，開(kāi)發(fā)環(huán)境下是 false, 是否將組件中的 CSS 提取至一個(gè)獨(dú)立的 CSS 文件中 (而不是動(dòng)態(tài)注入到 JavaScript中的inline代碼)。同樣當(dāng)構(gòu)建 Web Components組件時(shí)它總是會(huì)被禁用 (樣式是 inline 的并注入到了 shadowRoot 中)。當(dāng)作為一個(gè)庫(kù)構(gòu)建時(shí)，你也可以將其設(shè)置為false免得用戶(hù)自己導(dǎo)入 CSS。提取 CSS 在開(kāi)發(fā)環(huán)境模式下是默認(rèn)不開(kāi)啟的，因?yàn)樗?CSS 熱重載不兼容。然而，你仍然可以將這個(gè)值顯性地設(shè)置為 true 在所有情況下都強(qiáng)制提取。
    extract: true,
    // 默認(rèn)：false, 是否為 CSS 開(kāi)啟 source map。設(shè)置為true之后可能會(huì)影響構(gòu)建的性能。
    sourceMap: false,
    // 支持的 loader 有, css-loader,postcss-loader,sass-loader,less-loader,stylus-loader
    loaderOptions: {
      css: {
        // 這里的選項(xiàng)會(huì)傳遞給 css-loader
      },
      postcss: {
        // 這里的選項(xiàng)會(huì)傳遞給 postcss-loader
      }
    },
    devServer: {
      host: "0.0.0.0",
      port: 8888,
      open: true,
      // 如果你的前端應(yīng)用和后端 API 服務(wù)器沒(méi)有運(yùn)行在同一個(gè)主機(jī)上，你需要在開(kāi)發(fā)環(huán)境下將 API 請(qǐng)求代理到 API 服務(wù)器。這個(gè)問(wèn)題可以通過(guò)vue.config.js 中的 devServer.proxy 選項(xiàng)來(lái)配置。
      proxy: "http://localhost:6666",
      proxy: {
        "/dev-api": {
          target: "http://localhost:6666",
          changeOrigin: true,
          ws: true,
          pathRewrite: {
            ["^/dev-api"]: "",
          },
        }
      }
    },
     // 是否為 Babel 或 TypeScript 使用 thread-loader
    parallel: require('os').cpus().length > 1,
    // 向 PWA 插件傳遞選項(xiàng)
    pwa: {},
    // 這是一個(gè)不進(jìn)行任何 schema 驗(yàn)證的對(duì)象，因此它可以用來(lái)傳遞任何第三方插件選項(xiàng)。例如
    pluginOptions: {
      foo: {
      // 插件可以作為 `options.pluginOptions.foo` 訪(fǎng)問(wèn)這些選項(xiàng)。
      }
    }
  }

到了這里，關(guān)于Vue2 系列：vue.config.js 參數(shù)配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！