vue.config.js常用配置

來了老弟發表於2022-05-17
VueJS
記錄一下我遇到過得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')
            }
        }
    }
}

相關文章