现代化打包工具的普及·开发者可以通过配置文件自定义打包配置和输出目录·建议开发者遵循默认配置除非有明确的需求修改输出目录名称

作者：机器人技术佬 | 发布时间：2025-07-02 |

Vue项目通常采用Webpack、Vite等现代化的打包工具。这些工具默认将打包后的文件放在特定目录下，而不是传统的“build”文件夹。

在Vue CLI项目中，开发者可以通过配置文件自定义打包配置和输出目录。例如，在Vue CLI的配置文件中，你可以指定输出目录。

代码示例：


module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  // 更多配置...
};

使用Vue CLI创建的项目默认将打包后的文件放在“dist”目录中。这样的默认配置简洁明了，方便开发者快速上手。

传统的前端项目如Grunt、Gulp等构建工具，通常会将构建后的文件放在“build”文件夹中。这是由于历史习惯和工具特点导致的。

传统构建工具	现代化打包工具
Grunt/Gulp	Webpack/Vite
build文件夹	dist目录

以一个Vue项目为例，执行“npm run build”命令后，会在项目根目录下生成一个“dist”文件夹，其中包含打包后的资源文件。

dist文件夹包含的内容：

Vue项目默认使用“dist”文件夹存放打包后的文件，这是由于现代化打包工具的默认配置和社区约定。如果需要，开发者可以自定义输出目录名称。

建议开发者遵循默认配置，除非有明确的需求修改输出目录名称。熟悉“dist”文件夹的作用和内容有助于更好地进行项目部署和优化。