vue-cli3中vue.config.js配置教程详解

Vue CLI 3 是一个强大的工具，用于快速搭建 Vue.js 应用程序。它引入了“零配置”的概念，使得初始化项目变得极其简单。然而，在实际开发中，我们往往需要自定义一些配置以满足特定需求。这时，`vue.config.js` 文件就派上了用场。本文将详细介绍 `vue.config.js` 的配置选项及其用法。 `vue.config.js` 是 Vue CLI 3 的配置文件，位于项目的根目录下。当需要覆盖默认的 Webpack 配置时，我们可以通过这个文件进行自定义设置。以下是一些常见的配置项及其作用： 1. **publicPath**: 这个配置项用于指定应用部署的基础 URL。在生产环境中，通常设置为 '/public/' 或者实际的服务器路径；而在开发环境中，设置为 './' 或 '/'，确保本地开发时的路径正确。从 Vue CLI 3.3 开始，`baseUrl` 已被废弃，推荐使用 `publicPath`。 2. **outputDir**: 定义了构建输出的目标目录，即运行 `npm run build` 命令后，生成的静态资源文件将保存的位置。 3. **assetsDir**: 指定生成的静态资源（如 JavaScript、CSS、图片、字体等）的相对 `outputDir` 的目录。 4. **productionSourceMap**: 在生产环境中，是否生成源码映射文件（source map）。如果不需要进行源码调试，可以设置为 `false` 以加快构建速度。 5. **filenameHashing**: 如果设置为 `false`，则不会在输出文件名中添加哈希值，这样可以保留原有的文件名，但可能导致缓存问题。 6. **lintOnSave**: 是否在保存代码时进行 ESLint 检查，有助于保持代码风格的一致性。 7. **devServer**: 这部分配置用于 Webpack Dev Server，包括： - **open**: 是否在启动服务时自动打开浏览器。 - **host**: 服务器监听的 IP 地址，设置为 '0.0.0.0' 可允许所有网络访问。 - **port**: 服务器监听的端口号。 - **https**: 是否启用 HTTPS。 - **hotOnly**: 是否仅在热更新可用时才刷新浏览器。 - **proxy**: 配置代理，例如，将所有 `/api` 请求转发到指定的服务器，这对于本地开发时绕过跨域限制非常有用。 在实际开发中，可能还会遇到其他配置需求，如 `configureWebpack` 和 `chainWebpack`，这两个配置允许你直接修改或链式操作 Webpack 配置。`configureWebpack` 用于简单的配置覆盖，而 `chainWebpack` 则提供了更灵活的配置方式，允许深度定制 Webpack 配置。 `vue.config.js` 是 Vue CLI 3 的核心配置文件，通过它我们可以根据项目需求调整构建设置，如自定义输出目录、设置源码映射、配置代理服务器等。了解并熟练掌握这些配置，将极大地提升开发效率。在编写 `vue.config.js` 时，可以参考官方文档和其他开发者的经验分享，以便更好地满足项目需求。同时，不断学习和实践，才能真正掌握 Vue CLI 3 的强大功能。