Vue-cli 3.0 新特性及各参数详解

• 最近公司任务让我研究一下 vue-cli3.0，我就顺势简单写一些。vue-cli 3.0 相比于 2.0，最为直观的就是“0 配置”了，没有 build 和 config，使用 vue.config.js 来进行配置。下图是 3.0 与 2.0 项目目录对比：

• 更方便地管理插件(vue-cli-plugin-)

• 图形化界面管理工程，命令行 vue ui 启动

• 安装命令也变了，由 vue init < template-name> < project-name>变成了 yarn global add @vue/cli 或者 npm install -g @vue/cli

• 本工程的 GitHub

• 以下在 vue.config.js 配置的一些参数只是为了说明而存在。“可以，但没必要”

配置说明

module.exports = {
	// EG:baseUrl:'/myapp/', type:string，默认为'/'
	//若设置成' '，则为相对路径
	//生成的 CSS 文件要始终放在输出路径的根部，以确保 CSS 中的 URL 正常工作。
	// 把开发服务器放在根目录
	baseUrl:
		process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
	//outputDir,生产环境目录
	//Default: 'dist'
	outputDir: 'distribution',
	//放置生成的静态资源的 (相对于 outputDir 的) 目录,
	//Default: ''
	assetsDir: './static',
	//指定生成 index.html 的输出路径（相对于 outputDir），也可以是绝对路径
	//Default: 'index.html'
	indexPath: './index/index.html',
	//文件名是否含 hash，默认为 true
	filenameHashing: false,
	//在 multi-page 模式下构建应用。
	//Type: Object
	pages: {
		index: {
			//page 的入口，必选项
			entry: 'src/main.js',
			//模板来源
			template: 'public/index.html',
			//在 outputDir/index.html 的输出
			filename: 'index.html',
			//使用 title 选项时，template 中的 title 需要使用 htmlWebpackPlugin
			title: 'Index Page',
			//包含的块默认情况下会包含提取出来的 通用 chunk 和 vendor chunk
			chunks: ['chunk-vendors', 'chunk-common', 'index'],
		},
		// 当使用只有入口的字符串格式时，
		// 模板会被推导为 `public/subpage.html`
		// 并且如果找不到的话，就回退到 `public/index.html`
		// 输出文件名会被推导为 `subpage.html`
		subpage: 'src/main.js',
	},
	//Type: boolean | 'error'
	//只有安装 @vue/cli-plugin-eslint 才会生效，默认为 true，输出警告
	//若想将错误强制输出到浏览器，请设置成'error'
	//生产时禁用 eslint-loader
	//lintOnSave:process.env.NODE_ENV !=='production',
	lintOnSave: false,
	//设置浏览器 overlay 可以同时显示错误和警告
	devServer: {
		overlay: {
			warnings: false,
			error: false,
		},
	},
	//默认为 false，改为 true 后可以在 vue 组件中使用 template，但会增加 10kb
	//比如传入一个字符串给 template 或挂载到一个元素上
	//并以其 DOM 内部的 HTML 作为模板，则需要完整版
	runtimeCompiler: false,
	//Type: Array<string | RegExp>
	//默认为[]，babel-loader 忽略所有 node_modules 中的文件
	transpileDependencies: ['html-webpack-plugin'],
	//如果你不需要生产环境的 source map，
	//可以将其设置为 false 以加速生产环境构建，默认为 true
	productionSourceMap: false,
	//Type: string
	//设置 crossorigin 属性，默认为 undefined。
	//仅影响由 html-webpack-plugin 注入的标签，不影响直接写在模板里的标签
	//默认情况下根本不使用 CORS;
	//为 anonymous 时，意味着不会通过 Cookie、客户端 SSL 证书或 HTTP 身份验证交换用户凭据;
	//为 use-credentials 时，请求将提供凭据
	//无效关键字和空字符串将作为 anonymous 关键字处理。
	crossorigin: undefined,
	//Type: boolean
	//是否启用 SRI。若要部署到 cdn 上，启用该选项将提供额外的安全性，默认为 false
	//同样仅影响由 html-webpack-plugin 注入的标签，不影响直接写在模板里的标签
	//当启用 SRI 时，preload resource hints 会被禁用
	integrity: false,
	//Type: Object | Function
	//用于调整 webpack 配置
	//如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
	//如果这个值是一个函数，则会接收被解析的配置作为参数。
	//该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
	configureWebpack: (config) => {
		if (process.env.NODE_ENV === 'production') {
			//为生产环境修改配置
		} else {
			//为开发环境修改配置
		}
	},
	//对内部的 webpack 配置进行更细粒度的修改(链式操作)
	//需要熟悉 webpack-chain 的 API 并阅读一些源码以最大程度利用好这个选项
	//但是比起直接修改 webpack 配置，它的表达能力更强，也更为安全。
	//eg:替换一个 loader
	chainWebpack: (config) => {
		const svgRule = config.module.rule('svg');
		// 清除已有的所有 loader。
		// 否则接下来的 loader 会附加在该规则现有的 loader 之后。
		svgRule.uses.clear();
		//添加替换的 loader
		svgRule.use('vue-svg-loader').loader('vue-svg-loader');
	},

	css: {
		//可以去掉文件名中的.module
		//并将所有的 *.(css|scss|sass|less|styl(us)?)文件视为 CSS Modules 模块
		//默认为 false
		modules: true,
		//Type: boolean | Object
		//Default: 生产环境下是 true，开发环境下是 false
		//是否将组件中的 CSS 提取至一个独立的 CSS 文件中
		//(而不是动态注入到 JavaScript 中的 inline 代码)。
		//当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。
		//提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容
		extract: true,
		//是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
		//default:false
		sourceMap: false,
		//向 CSS 相关的 loader 传递选项
		//支持的 loader 有 css-loader postcss-loader sass-loader less-loader stylus-loader
		loaderOptions: {
			css: {
				//这里的选项会传递给 css-loader
			},
		},
	},
	//修改 webpack-dev-server
	devServer: {
		port: 8080,
	},

	//Default: false
	//是否为 Babel 或 TypeScript 使用 thread-loader（详情见 webpack）
	parallel: false,
};

参考：

1. lintOnSave 是在开发环境下通过 eslint-loader 在每次保存时 lint 代码，不保存不会执行
2. lintOnSave 为 false 的时候，会有”error”字样出现在”warning”里面了，没注意看，还以为是 error 了。
3. webpack4 用两个新的配置选项(optimization.splitChunks and optimization.runtimeChunk)替代了 CommonsChunkPlugin
4. crossorigin<script src="https://xxx.js" crossorigin="anonymous"></script>
5. 当启用SRI 时，preload resource hints 会被禁用，因为Chrome 的一个 bug 会导致文件被下载两次。
6. configureWebpack：配合 webpack>简单的配置方式
7. chainWebpack：webpack 链式操作
8. os.cpus() 返回一个对象数组，包含所安装的每个 CPU/内核的信息
9. webpack 的 thread-loader
10. node cpu 调度优化

to be continued…

Donate