How to direct vue-cli to put built project files in different directories?

在使用 Vue CLI 创建项目时，默认的构建输出文件（例如，编译后的 JavaScript、CSS 等）是放在项目中的 dist/ 目录下的。如果想要更改构建输出的目录，可以通过修改 Vue 项目中的 vue.config.js 文件来实现。

步骤如下：

1. 找到或创建 vue.config.js 文件

   在项目的根目录下，查看是否已存在 vue.config.js。如果不存在，你需要新建一个。

2. 修改输出目录

   在 vue.config.js 文件中，你可以设置 outputDir 属性来指定构建输出的目录。例如，如果你想把构建文件放在名为 build_output 的目录中，你可以这样配置：

   javascript
   module.exports = {
     outputDir: 'build_output',
   }

3. 重新构建项目

   修改配置后，需要重新运行构建命令，例如使用 npm run build。构建完成后，你会发现所有构建生成的文件都会放在你指定的 build_output 目录中。

示例：

假设我们有一个 Vue CLI 创建的项目，想要将构建产物放到根目录下的一个子目录 /var/www/html 中。我们可以这样设置 vue.config.js：

javascript
module.exports = {
  // 更改构建输出目录为 /var/www/html
  outputDir: '/var/www/html'
}

然后运行 npm run build，构建完成后，所有文件将被放置在 /var/www/html 目录下。

为什么这样做？

更改构建文件的输出目录可能因多种原因，比如：

• 与其他部署流程或工具集成。
• 按照服务器配置要求将文件放在特定目录。
• 便于管理特定环境下的文件路径。

通过 Vue CLI 提供的灵活配置方式，我们可以轻松地实现这些需求，确保我们的构建输出符合项目和团队的具体要求。