乐趣区

关于vue-cli:vueconfigjs常用配置

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