關於VUE 配置文件config詳解內容

// const path = require('path');
module.exports = {
  /** 區分打包環境與開發環境
   * process.env.NODE_ENV==='production'  (打包環境)
   * process.env.NODE_ENV==='development' (開發環境)
   * baseUrl: process.env.NODE_ENV==='production'?"https://xxx":'',
   */
  // 項目部署的基礎路徑
  // 我們默認假設你的應用將會部署在域名的根部,
  // 例如 https://www.my-app.com/
  // 如果你的應用部署在一個子路徑下，那么你需要在這里
  // 指定子路徑。比如將你的應用部署在
  // https://www.foobar.com/my-app/
  // 那么將這個值改為 '/my-app/'

  //baseUrl: '/',//vue-cli3.3以下版本使用
  publicPath: '/',//vue-cli3.3+新版本使用

  // 構建好的文件輸出到哪里
  outputDir: "dist",

  // assetsDir: "base" //靜態資源打包地址

  //以多頁模式構建應用程序。
  pages: undefined,

  // 是否在保存時使用‘eslint-loader’進行檢查 // 有效值: true | false | 'error' 
  // 當設置為‘error’時，檢查出的錯誤會觸發編譯失敗
  lintOnSave: true,

  // 使用帶有瀏覽器內編譯器的完整構建版本,是否使用包含運行時編譯器的 Vue 構建版本
  runtimeCompiler: false,

  // babel-loader默認會跳過`node_modules`依賴. // 通過這個選項可以顯示轉譯一個依賴
  // 默認babel-loader忽略mode_modules，這里可增加例外的依賴包名
  transpileDependencies: [],

  // 是否在構建生產包時生成 sourceMap 文件，false將提高構建速度  映射文件 打包時使用
  productionSourceMap: false,

  // 調整內部的webpack配置. 
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => { },
  // chainWebpack: () => {
  //   // 刪除懶加載模塊的prefetch，降低帶寬壓力
  //   // 而且預渲染時生成的prefetch標簽是modern版本的，低版本瀏覽器是不需要的
  //   //config.plugins.delete('prefetch');
  //   //if(process.env.NODE_ENV === 'production') { 
  //   // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
  //   //} else {
  //   // 為開發環境修改配置...
  //   //}
  // },
  configureWebpack: () => { },
  // configureWebpack: () => {
  // // 生產and測試環境
  // let pluginsPro = [
  //   new CompressionPlugin({ //文件開啟Gzip，也可以通過服務端(如：nginx)
  //     filename: '[path].gz[query]',
  //     algorithm: 'gzip',
  //     test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
  //     threshold: 8192,
  //     minRatio: 0.8,
  //   }),
  //   new BundleAnalyzerPlugin(),
  // ];
  // //開發環境
  // let pluginsDev = [
  //   new vConsolePlugin({
  //     filter: [], // 需要過濾的入口文件
  //     enable: true // 發布代碼前記得改回 false
  //   }),
  // ];
  // if (process.env.NODE_ENV === 'production') { // 為生產環境修改配置...process.env.NODE_ENV !== 'development'
  //   config.plugins = [...config.plugins, ...pluginsPro];
  // } else {
  //   // 為開發環境修改配置...
  //   config.plugins = [...config.plugins, ...pluginsDev];
  // }
  // },

  // CSS 相關選項
  css: {
    // 將組件內部的css提取到一個單獨的css文件（只用在生產環境）
    // 也可以是傳遞給 extract-text-webpack-plugin 的選項對象
    // 是否使用css分離插件 ExtractTextPlugin，采用獨立樣式文件載入，不采用<style>方式內聯至html文件中
    extract: true,

    // 是否在構建css樣式映射，false將提高構建速度
    sourceMap: false,

    // css預設器配置項
    loaderOptions: {
      //   sass: {
      //     data: ''//`@import "@/assets/scss/mixin.scss";`
      //   }
    },

    // 啟用 CSS modules for all css / pre-processor files.
    modules: false
  },

  // 構建時開啟多進程處理 babel 編譯
  //是否為 Babel 或 TypeScript 使用 thread-loader。
  //該選項在系統的 CPU 有多於一個內核時自動啟用，僅作用於生產構建，在適當的時候開啟幾個子進程去並發的執行壓縮
  parallel: require("os").cpus().length > 1,

  // PWA 插件相關配置 
  // 單頁插件相關配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  //vue3.0+
  devServer: {//跨域
    open: process.platform === "darwin",
    //open: true, //配置自動啟動瀏覽器
    disableHostCheck: false,
    host: "0.0.0.0",
    // host: "0.0.0.0" =>
    //   App running at:
    // - Local:   http://localhost:8080/
    // - Network: http://192.168.1.102:8080/
    // host: "127.0.0.1"=>
    //   App running at:
    // - Local:   http://127.0.0.1:8080/
    // - Network: http://127.0.0.1:8080/
    port: 8080,// 端口號
    https: false,// true 配置之后可使用生成 https://localhost:8080/
    hotOnly: false,// 熱更新（webpack已實現了，這里false即可）
    // proxy: null // 設置代理
    proxy: 'http://localhost:8080'   // 配置跨域處理,只設一個代理
    //   proxy: { //多個
    //     // 配置跨域處理 可以設置多個
    //     '/api': {
    //       target: 'https://www.baidu.com/api',
    //       ws: true,
    //       changeOrigin: true
    //     }
    //   }
    // before: app => {}
  },

  // vue 2.0 設置跨域
  // dev: {
  //   // proxyTable: {
  //   //     '/api': {
  //   //         target: 'http://127.0.0.1:8080', // 目標地址
  //   //         changeOrigin: true,
  //   //         pathRewrite: {
  //   //             '^/api': '' // 將目標地址變成這個
  //   //         }
  //   //     }
  //   // },
  // },

  // 是否啟用dll webpack dll
  // 關於dll只做簡單解釋 未附詳細代碼
  // webpack.dll.conf.js 
  // 1、entry配置需要dll打包的庫
  // 2、module配置處理對應文件類型的loader
  // 3、增加 webpack.DllPlugin插件
  //    (1)、path:生成mainfest.json文件的絕對路徑。mainfest.json里面的內容為所有被打包到dll.js文件模塊id的映射。
  //    (2)、name：webpack打包時mainfest.json包含的庫的暴露出來的函數名名
  //    (3)、contenxt(可選):引入manifest文件的context，默認為webpack的context
  // dll: false,//配置好dll庫，設置dll：true；可優化打包效率。減少打包時間，增加庫緩存

  // 第三方插件配置
  pluginOptions: {},
  // pluginOptions: {
  //   'style-resources-loader': {//https://github.com/yenshih/style-resources-loader
  //     preProcessor: 'scss',//聲明類型
  //     'patterns': [
  //       //path.resolve(__dirname, './src/assets/scss/_common.scss'), 
  //     ],
  //     //injector: 'append'
  //   }
  // }
};