本人喜歡用vue cli建立專案，但大家都知道Vue CLI 3 開始 Webpack 配置就被封裝到 vue.config.js 中了，並且專案中預設是沒有vue.config.js檔案的，如果我要進行Webpack 配置就得先新增一個vue.config.js，然後一項一項的進行初始化。那麼vue cli為什麼不再暴露原生 Webpack 配置檔案？

　　如果經歷過較長時間的 Vue CLI 2 專案，你大概能遇到「模板升級」的問題。一個工程通過模板初始化好後，工程配置部分就基本固定了。當這個模板升級帶來了更優秀的工程配置，你就要面對如何引入新配置的難題。重新初始化專案，太肉疼；對比新舊模板差異並手動引入，太心累。總之就是很惱人。Vue CLI 3 放棄模板轉向外掛，就是希望能通過動態生成的方式解決這個問題。外掛升級，你無需再關心哪裡有變化、要如何引入到現有工程，你需要做的只是升級外掛依賴的版本（預期 Vue CLI 4 甚至可以幫你升級你的業務程式碼）。但實現這一效果的前提就是 Webpack 配置由 Vue CLI（及各種外掛）來管理操控。舉一個簡單的例子：原本 webpack.config.js 在 /build 下的，你出於某種原因移到了工程根目錄，Vue CLI 要如何跟蹤並更新配置呢？ 一切的抉擇都是取捨。

　　那麼怎麼配置一個vue.config.js檔案？

1.新增vue.config.js

直接在package.json的同級目錄下新增vue.config.js

2.初始化vue.config.js

const path = require('path')
module.exports = {
  publicPath: './', // 基本路徑
  outputDir: 'dist', // 輸出檔案目錄
  lintOnSave: true, // eslint-loader 是否在儲存的時候檢查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 

  // webpack配置
  chainWebpack: (config) => {
    // 以下相當於webpack的module配置
    // config.module
    //   .rule('ant-design-vue')
    //   .test(/(\.jsx|\.js)$/)
    //   .include
    //   .add(path.join(__dirname, './node_modules/ant-design-vue'))
    //   .add(path.join(__dirname, './node_modules/ant-design-vue/es/icon'))
 

    //   .end()
    //   .use('babel')
    //   .loader('babel-loader')
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
      config.mode = 'production'
    } else {
      // 為開發環境修改配置...
      config.mode = 'development'
    }
    // Object.assign(config, {
    // //   開發生產共同配置
    //   resolve: {
    //     alias: {
    //       '@': path.resolve(__dirname, './src'),
    //       '@c': path.resolve(__dirname, './src/components'),
    //       '@p': path.resolve(__dirname, './src/views'),
    //       '@m': path.resolve(__dirname, './node_modules')
    //     } // 別名配置
    //   }
    // })
  },
  productionSourceMap: false, // 生產環境是否生成 sourceMap 檔案
  // css相關配置
  css: {
    extract: true, // 是否使用css分離外掛 ExtractTextPlugin
    sourceMap: false, // 開啟 CSS source maps?
    loaderOptions: {
      css: {}, // 這裡的選項會傳遞給 css-loader
      less: {
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }, // css預設器配置項 詳見https://cli.vuejs.org/zh/config/#css-loaderoptions
    modules: false // 啟用 CSS modules for all css / pre-processor files.
  },
  parallel: require('os').cpus().length > 1, // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個核心時自動啟用，僅作用於生產構建。
  pwa: {}, // PWA 外掛相關配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相關配置
  devServer: {
    open: process.platform === 'darwin',
    host: '', // 允許外部ip訪問
    port: 8080, // 埠
    https: false, // 啟用https
    overlay: {
      warnings: true,
      errors: true
    }, // 錯誤、警告在頁面彈出
    proxy: 'http://localhost:8080'
    // 以下是詳細的Proxy配置
    // proxy: {
    //   '/api': {
    //     target: 'http://www.baidu.com/api',
    //     changeOrigin: true, // 允許websockets跨域
    //     // ws: true,
    //     pathRewrite: {
    //       '^/api': ''
    //     }
    //   }
    // } // 代理轉發配置，用於除錯環境
  },
  // 第三方外掛配置
  pluginOptions: {
  }
}

如果是一個新建立的專案，直接複製貼上應該就可以運行了。

要是看註釋不過癮，請去看看官網的介紹：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

本文來自部落格園，作者：不如飼豬，轉載請註明原文連結：https://www.cnblogs.com/ifeelthecall/p/15107910.html