vue.config.js 配置参数概述：提升前端开发体验

前端

2023-11-10 12:29:41

从模块化角度探析 vue.config.js

首先，vue.config.js 是一个 JavaScript 模块，它使用 module.exports 导出一个对象，这个对象包含了各种配置选项。当 Vue CLI 启动时，它会加载并解析这个模块，并使用导出的对象来配置构建过程。

vue.config.js 的常用设置

publicPath：公共路径
- publicPath 是一个字符串，用于指定静态资源的公共路径。
- 它可以是绝对路径或相对路径。
- 默认为 '/'。
outputDir：输出目录
- outputDir 是一个字符串，用于指定构建输出目录的路径。
- 它可以是绝对路径或相对路径。
- 默认为 'dist'。
assetsDir：资源目录
- assetsDir 是一个字符串，用于指定静态资源目录的路径。
- 它可以是绝对路径或相对路径。
- 默认为 'assets'。
runtimeCompiler：运行时编译
- runtimeCompiler 是一个布尔值，用于指示是否使用运行时编译。
- 如果为 true，则在运行时编译模板。
- 如果为 false，则在构建时编译模板。
- 默认为 false。
devServer：开发服务器
- devServer 是一个对象，用于配置开发服务器。
- 它包含了各种选项，比如端口、主机名、代理等。
- 默认为 {}。
lintOnSave：保存时检查
- lintOnSave 是一个布尔值，用于指示是否在保存时检查代码。
- 如果为 true，则在保存时使用 ESLint 检查代码。
- 如果为 false，则不会检查代码。
- 默认为 true。
productionSourceMap：生产环境sourceMap
- productionSourceMap 是一个布尔值，用于指示是否在生产环境生成 sourceMap。
- 如果为 true，则在生产环境生成 sourceMap。
- 如果为 false，则不会生成 sourceMap。
- 默认为 false。
parallel：并行构建
- parallel 是一个布尔值，用于指示是否使用多核并行构建。
- 如果为 true，则使用多核并行构建。
- 如果为 false，则不会使用多核并行构建。
- 默认为 true。
chainWebpack：链式调用
- chainWebpack 是一个函数，用于对 webpack 配置进行链式调用。
- 它允许你使用 webpack 的 API 来修改构建配置。
- 默认为 null。
pluginOptions：插件配置
- pluginOptions 是一个对象，用于配置插件的选项。
- 它包含了各种插件的配置选项。
- 默认为 {}。

优化构建的实用技巧

使用并行构建
- 并行构建可以充分利用多核 CPU 的优势，提高构建速度。
- 你可以通过将 parallel 选项设置为 true 来启用并行构建。
使用雪碧图
- 雪碧图可以将多个小图片合并成一张大图片，从而减少 HTTP 请求的数量，提高页面加载速度。
- 你可以通过使用 image-webpack-loader 插件来实现雪碧图功能。
使用代码分割
- 代码分割可以将代码分为多个 chunk，从而减少首屏加载时间，提高页面加载速度。
- 你可以通过使用 webpack 的代码分割特性来实现代码分割功能。
使用 CSS 提取
- CSS 提取可以将 CSS 代码从 JavaScript 代码中提取出来，从而提高页面加载速度。
- 你可以通过使用 mini-css-extract-plugin 插件来实现 CSS 提取功能。