vue-cli3.0中vue.config.js配置

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,
}

猜你喜欢

转载自blog.csdn.net/z858466/article/details/102877876