1. 程式人生 > 其它 >vue vue-cli配置檔案 config

vue vue-cli配置檔案 config

檔案目錄

index.js

dev.env.js

prod.env.js

index.js 配置註釋



"use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require("path");

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    }
  },
  dev: {
    // Paths
    assetsSubDirectory: "static", //指的是靜態資原始檔夾,預設“static”,
    assetsPublicPath: "/",//指的是釋出路徑,
    //是我們常用來配置代理API的地方,
    proxyTable: {
      "/api": {
        target: "http://localhost:8088",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/"
        }
      }
    },

    // 各種開發伺服器設定
    host: "192.168.XXX.XXX", // 可以被 process.env.HOST 覆蓋
    port: 8088, // 可以通過 process.env.PORT 覆蓋,如果埠正在使用,將確定一個空閒的
    autoOpenBrowser: false,   //自動開啟預設瀏覽器
    errorOverlay: true,   //查詢錯誤
    notifyOnErrors: true,  //通知錯誤
    //poll是跟devserver相關的一個配置,webpack為我們提供的devserver是可以監控檔案改動的,但在有些情況下卻不能工作,我們可以設定一個輪詢(poll)來解決
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // useEslint是否使用eslint

    // showEslintErrorsInOverlay是否展示eslint的錯誤提示

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: "cheap-module-eval-source-map", //webpack提供的用來方便除錯的配置,它有四種模式,可以檢視webpack文件瞭解更多

    // 如果你在 devtools 中除錯 vue 檔案有問題,
     // 將此設定為 false - 它*可能*有幫助
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,//一個配合devtool的配置,當給檔名插入新的hash導致清楚快取時是否生成souce maps,預設在開發環境下為true

    cssSourceMap: true //是否開啟cssSourceMap
  },

  build: {
    // index.html 的模板
    //編譯後index.html的路徑,path.resolve(__dirname, '../dist')中
    // path.resolve(__dirname)指的是index.js所在的絕對路徑,再去找“../dist”這個路徑(node相關的知識)
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static", //指的是靜態資原始檔夾,預設“static”,
    assetsPublicPath: "./",//指的是釋出路徑,

    /**
     * Source Maps
     */

    productionSourceMap: false,   //禁止打包後生成.map檔案   --可以防止生產環境原始碼的暴露  減小打包後文件體積
    // https://webpack.js.org/configuration/devtool/#production
    devtool: "#source-map",

    // 預設情況下 Gzip 關閉許多流行的靜態主機,例如
     // Surge 或 Netlify 已經為您壓縮了所有靜態資產。
     // 在設定為 `true` 之前,請確保:
    // 如果按上述操作完成後,打包時出錯,建議更換低版本的compression-webpack-plugin,推薦使用1.1.12或者1.1.11版本等
    // npm uninstall --save-dev compression-webpack-plugin
    //npm install --save-dev [email protected]
    productionGzip: true,//是否壓縮
    productionGzipExtensions: ["js", "css"],//gzip模式下需要壓縮的檔案的副檔名,設定後會對相應副檔名的檔案進行壓縮

    // 執行帶有額外引數的構建命令
     // 在構建完成後檢視包分析器報告:
     // `npm run build --report`
     // 設定為 `true` 或 `false` 以始終開啟或關閉它
     // 是否開啟打包後的分析報告
    bundleAnalyzerReport: process.env.npm_config_report
  }
};


dev.env.js註釋


'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
//在“dev.env.js”中,先引入了webpack-merge這個模組。這個模組的作用是來合併兩個配置檔案物件並生成一個新的配置檔案,有點兒類似於es6的object.assign();
// vue-cli中將一些通用的配置抽出來放在一個檔案內,在對不同的環境配置不同的程式碼,最後使用webpack-merge來進行合併,減少重複程式碼,正如文件中所說,“webpack遵循不重複原則(Don't repeat yourself - DRY),不會再不同的環境中配置相同的程式碼”

// 當然,關於webpack-merge的內容還遠不止這些,想了解更多關於這個模組的朋友請訪問 https://www.npmjs.com/package/webpack-merge

// 好,讓我們接著回到程式碼中來,引入webpack-merge後這個檔案又引入了prod.env.js,接著就將prod.env.js的配置和新的配置,即指明開發環境(development)進行了merge。(我有點兒不太理解為什麼要這樣做,如果不merge直接寫module.exports={NODE_ENV:'"development'}也是可以的,難道是為了優雅降級?)

// 還有一點需要注意是的,development和production一定要加雙引號,不然會報錯!!!
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})


prod.env.js 註釋


'use strict'
module.exports = {
  NODE_ENV: '"production"'
}