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

When creating a project with Vue CLI, the default build output files (e.g., compiled JavaScript, CSS, etc.) are placed in the dist/ directory within the project. To change the build output directory, you can modify the vue.config.js file in your Vue project.

Steps:

1. Find or create the vue.config.js file

In the project root directory, check if vue.config.js already exists. If not, create a new one.

1. Configure the output directory

In the vue.config.js file, set the outputDir property to specify the build output directory. For example, to place the build files in a directory named build_output, configure it as:

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

1. Rebuild the project

After modifying the configuration, run the build command again, such as npm run build. Once the build is complete, all generated build files will be located in the specified build_output directory.

Example:

Suppose we have a Vue CLI project and wish to output the build artifacts to the subdirectory /var/www/html under the root directory. Configure vue.config.js as follows:

javascript
module.exports = {
  // Change the build output directory to /var/www/html
  outputDir: '/var/www/html'
}

After running npm run build, the build will complete, and all files will be placed in the /var/www/html directory.

Why do this?

Changing the output directory of build files may be necessary for various reasons, such as:

• Integrating with other deployment workflows or tools.
• Placing files in specific directories as required by server configurations.
• Simplifying file path management in specific environments.

By leveraging Vue CLI's flexible configuration options, we can easily meet these requirements, ensuring that the build output aligns with the specific needs of the project and team.