Vue CLI 配置详解：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureW

最新推荐文章于 2025-03-17 08:48:27 发布

api_git355

最新推荐文章于 2025-03-17 08:48:27 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript 前端开发

本文链接：https://blog.csdn.net/api_git355/article/details/133215800

版权

前端开发专栏收录该内容

184 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详细介绍了Vue CLI的配置选项，包括publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack和productionSourceMap。理解这些选项有助于前端开发者更好地控制项目构建和输出，实现更高效的Vue.js应用开发。例如，publicPath用于设定部署的基础URL，outputDir指定构建输出目录，而filenameHashing则控制是否为文件名添加哈希，以避免浏览器缓存问题。configureWebpack允许自定义Webpack配置，以满足特定项目需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue CLI 配置详解：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack 和 productionSourceMap

在前端开发中，Vue CLI 是一个非常强大的工具，它为我们提供了一种简单易用的方式来构建 Vue.js 应用程序。作为一个开发人员，了解 Vue CLI 的配置选项是非常重要的，因为它们可以帮助我们更好地控制项目的构建和输出结果。在本文中，我们将详细介绍几个常用的 Vue CLI 配置选项，包括：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack 和 productionSourceMap。

publicPath（公共路径）
publicPath 选项用于指定项目的公共路径，即项目部署时的基本 URL。在默认情况下，publicPath 的值是 ‘/’，适用于大多数情况。但如果你的项目将部署在子目录下，例如 https://www.example.com/my-app/，则需要将 publicPath 设置为 /my-app/，这样引用静态资源时的路径会正确地补全。

示例代码：

了解本专栏