vue.config.js常用配置

记录一下我遇到过得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')
            }
        }
    }
}