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