vue.config.js模板

　　關於vue cli3.0中vue.config.js的配置，我看着官網走了一遍，整理了一下，因為配置項比較多，所以有的我就沒放，給出了鏈接。（可以看鏈接里面自己配置哦）

// vue.config.js
module.exports = {
    // type :string  defalut :"/"
    // 把開發服務器架設在根路徑
    publicPath: process.env.NODE_ENV === 'produvtion'
    ? '/production-sub-path/'
    : '/',

    // type :string  defalut :"dist"
    // 打包后的文件夾名字
    outputDir: 'dist',

    // type :string  defalut :""
    // 靜態資源目錄
    assetsDir: 'assets',

    // type :string  defalut :"index.html"
    // 指定生成的 index.html 的輸出路徑 (相對於 outputDir)。也可以是一個絕對路徑。
    indexPath: 'index.html',

    // type :boolean  defalut :"true"
    // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存,如果是vue cli創建的index.html，則為true，無法使用 Vue CLI 生成的 index HTML，為false
    filenameHashing: true,

    // type :object  defalut :"undefined"
    // 設置單頁面與多頁面
    // 多頁面情況下，每個“page”應該有一個對應的 JavaScript 入口文件。其值應該是一個對象，對象的 key 是入口的名字，value 是：
        // 一個指定了 entry, template, filename, title 和 chunks 的對象 (除了 entry 之外都是可選的)；
        // 或一個指定其 entry 的字符串。
    // 具體情況看官網 https://cli.vuejs.org/zh/config/#pages
    pages: {
        index: {
            // page 的入口
            entry: 'src/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']
          }
    },

    // type :boolean| error defalut :"true"
    // 是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼
        // true: eslint-loader 會將 lint 錯誤輸出為編譯警告。默認情況下，警告僅僅會被輸出到命令行，且不會使得編譯失敗,在開發和生產環境都會起作用
            // 想要在生產構建時禁用 eslint-loader  ==>  lintOnSave: process.env.NODE_ENV !== 'production'
        // false：無反應
        // error：這會強制 eslint-loader 將 lint 錯誤輸出為編譯錯誤，同時也意味着 lint 錯誤將會導致編譯失敗。
        // 通過設置讓瀏覽器 overlay 同時顯示警告和錯誤 在 devServe 配置項中  ==>  overlay: {warnings: true,errors: true}
    lintOnSave: true,

    // type :boolean defalut :"false"
    // 是否使用包含運行時編譯器的 Vue 構建版本。設置為 true 后你就可以在 Vue 組件中使用 template 選項了，但是這會讓你的應用額外增加 10kb 左右。
        // 具體信息看官網 https://cn.vuejs.org/v2/guide/installation.html#運行時+編譯器vs.只包含運行時
    runtimeCompiler: false,

    // type :Array<string | RegExp> defalut :"[]" (RegExp) ==> 正則
    // 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴，可以在這個選項中列出來
    transpileDependencies: [],

    // type :boolean  defalut :"true"
    // SourceMap 一個存儲源代碼與編譯代碼對應位置映射的信息文件
    // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建
    productionSourceMap: true,

    // type :String  defalut : undefined
    // 設置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 標簽的 crossorigin 屬性。需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。
    // 這個應該和標簽跨域有關  具體細節看  ==> https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
    // crossorigin: '',

    // type :boolean  defalut :"false"
    // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 標簽上啟用 Subresource Integrity (SRI)。如果你構建后的文件是部署在 CDN 上的，啟用該選項可以提供額外的安全性。
    // 需要注意的是該選項僅影響由 html-webpack-plugin 在構建時注入的標簽 - 直接寫在模版 (public/index.html) 中的標簽不受影響。
    // 另外，當啟用 SRI 時，preload resource hints 會被禁用，因為 Chrome 的一個 bug 會導致文件被下載兩次
    // SRI(子資源完整性) https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
    integrity: false,

    // type: object | function
    // 調整 webpack 配置
    // 如果這個值是一個對象，則會通過 webpack-merge 合並到最終的配置中。
    // 如果這個值是一個函數，則會接收被解析的配置作為參數。該函數及可以修改配置並不返回任何東西，也可以返回一個被克隆或合並過的配置版本。
    // 細節查看 https://cli.vuejs.org/zh/guide/webpack.html#簡單的配置方式
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 為生產環境修改配置...
        } else {
          // 為開發環境修改配置...
        }
    },

    // type:function
    // 是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。允許對內部的 webpack 配置進行更細粒度的修改。
    // 具體細節查看 https://cli.vuejs.org/zh/guide/webpack.html#鏈式操作(高級)
    // 你需要熟悉 webpack-chain 的 API 並閱讀一些源碼以便了解如何最大程度利用好這個選項，但是比起直接修改 webpack 配置，它的表達能力更強，也更為安全。
    // chainWebpack   ==>  我有點理解不了，應該是修改 添加 替換loader

    css: {
        // type :boolean  defalut :"false"
        // 默認情況下，只有 *.module.[ext] 結尾的文件才會被視作 CSS Modules 模塊。設置為 true 后你就可以去掉文件名中的 .module 並將所有的 *.(css|scss|sass|less|styl(us)?) 文件視為 CSS Modules 模塊。
        // 細節查看https://cli.vuejs.org/zh/guide/css.html#css-modules
        modules: false,

        // type:boolean | object defalut:生產環境下是 true，開發環境下是 false
        // 是否將組件中的 CSS 提取至一個獨立的 CSS 文件中 (而不是動態注入到 JavaScript 中的 inline 代碼)。
        // 當作為一個庫構建時，你也可以將其設置為 false 免得用戶自己導入 CSS
        // 提取 CSS 在開發環境模式下是默認不開啟的，因為它和 CSS 熱重載不兼容。然而，你仍然可以將這個值顯性地設置為 true 在所有情況下都強制提取。
        // extract

        // type:boolean defalut :"false"
        // 是否為 CSS 開啟 source map。設置為 true 之后可能會影響構建的性能。
        sourceMap: false,

        // type:object defalut:{}
        // 向 CSS 相關的 loader 傳遞選項。css預設器配置項
        // loader 可以通過 loaderOptions 配置，包括：css-loader postcss-loader sass-loader less-loader stylus-loader
        // 具體細節查看 https://cli.vuejs.org/zh/guide/css.html#向預處理器Loader傳遞選項
        loaderOptions: {
            css: {
                // 這里的選項會傳遞給 css-loader
            },
            postcss: {
                // 這里的選項會傳遞給 postcss-loader
            }
        }
    },
    // type:boolean defalut:require('os').cpus().length > 1
    // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啟用，僅作用於生產構建
    // 構建時開啟多進程處理babel編譯
    parallel: require('os').cpus().length > 1,

    // type: object
    // 單頁插件相關配置  向PWA插件傳遞選項
    // 具體細節 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // type:object
    // 這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。
    // schema數據庫對象的集合 (也有其他意思。。。)
    pluginOptions: {},

    // type:object
    // 開發配置
    // 細節查看 https://webpack.js.org/configuration/dev-server/#devserver
    devServer: {
        open: true,
        hot: true,
        host: '0.0.0.0',
        port: '8081'
    }
}

以上就是就是一個簡單的模板，歡迎大佬指正（滑稽滑稽）