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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章