vue-cli3.0创建项目时没有创建vue.config.js,可以自己在根目录下创建该文件
const path = require('path') //路径
const uglifyJsPlugin = require('uglifyjs-webpack-plugin') //npm install uglifyjs-webpack-plugin --save-dev
//生产环境
const isProduction = process.env.NODE_ENV === 'production'
//引入文件的方法
function resolve(dir){
return path.join(__dirname, dir)
}
module.exports = {
//基本路径
publicPath: './', //原先是 baseUrl publicPath代替
//输出文件目录
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts)的(相对于outputDir的)目录
//assetsDir: './',
//指定生成的index.html 的输出路径(相对于outputDir) 也可以是一个绝对路径
//indexPath: './',
//eslint-loader 在保存的时候进行检查
lintOnSave: true,
devServer: {
compress: false,//开启压缩
// open: true,//自动开启浏览器
// proxy: {
// '/apply': {
// target: 'http:xxx.com', //需要代理的服务器地址
// ws: true, //websocket与后台形成一个通道 持续的
// changeOrigin: true, //是否允许跨域
// pathRewrite: { //重写
// '/api': '/'
// }
// }
// }
},
//css 相关设置
css: {
//是否使用 css分离插件 ExtractTextPlugin
extract: true,
//sourceMap是什么 (主要是方便开发人员的错误定位) 如果为true打包时间大大增加
sourceMap: false,
//css预处理器配置
loaderOptions: {
//pass options to sass-loader
sass: {
//引入全局变量样式
data: `
@import "@/assets/common/index.sass"
`
}
},
// 启用 CSS modules for all css / pre-processor files(v3用modules v4用requireModuleExtension)
requireModuleExtension: false,
},
//webpack配置
chainWebpack: config => {
//配置别名 不配置会报错
config.resolve.alias
.set('@', resolve('src'))
.set('@img', resolve('src/assets/img'))
.set('@sass', resolve('src/assets/common'))
//生产环境配置
if(isProduction){
//删除预加载
config.plugins.delete('preload')
config.plugins.delete('prefetch')
//开启压缩代码
config.optimization.minimize(true)
//分割代码
config.optimization.splitChunks({
chunks: 'all'
})
//生产环境注入cdn
}
},
configureWebpack: config => {
if(isProduction){
//用cdn方式注入
//为生产环境修改配置
config.plugins.push(
//生产环境自动删除console
new uglifyJsPlugin({
uglifyOptions: {
compress: {
//waring: false
drop_debugger: true,
drop_console: true
}
},
//是否生成sourcemap
sourceMap: false,
//使用多进程并行来提高构建速度
parallel: true
})
)
}else{
//为开发环境修改配置
//也可以为测试环境配置
}
},
//生产环境是否生成 sourceMap文件
productionSourceMap: false,
// 启用并行化 默认的并发数:os.cpus().length - 1,并行化可以显著加速构建
parallel: require('os').cpus().length > 1,
}