vue.config.js常用配置

來了老弟 發表於 2022-05-17
Vue
記錄一下我遇到過得vue.config.js配置項,以及當時用到它們的原因。

publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
      ? '/vue/'
      : '/',
}

假如你的域名為 https://www.iicoom.top,假如生成環境 https://www.iicoom.top/ 這個路徑已經被其他專案佔用,想要從
https://www.iicoom.top/vue/ 這個路徑訪問,那麼進行上面的配置就可以實現。

configureWebpack

remove log

平時專案開發除錯的時候免不了會有一些除錯,列印一些log。當專案上線時去手動移除這些log可能是比較麻煩的事情,有了下面這個配置,當我們使用

npm run build
// or
yarn build

之後,編譯後的程式碼部署到線上環境,開啟控制檯就是清清爽爽的樣子。

module.exports = {
  configureWebpack: config => {
    // 生產環境取消 console.log
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
    }
  }
}

resolve

當時專案中引入了一個富文字編輯器,叫 summernote。它依賴 bootstrap 和 jQuery,安裝依賴後仍然提示 jquery 沒有安裝,於是進行了下面的配置,問題解決。

const path = require('path');

module.exports = {
    // 選項...
    configureWebpack: {
        resolve: {
            alias: {
                'jquery': path.resolve(__dirname, './node_modules/jquery/src/jquery'),
                'jQuery': path.resolve(__dirname, './node_modules/jquery/src/jquery')
            }
        }
    }
}