Sometimes, we want to direct Vue CLI to put built project files in different directories.

In this article, we’ll look at how to direct Vue CLI to put built project files in different directories.

How to direct Vue CLI to put built project files in different directories?

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.

For instance, we write

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/dist"),
  assetsDir: "../../static/assets",
};

to set the outputDir to a path that’s different from the default to put the built files in that path.

And we set the assetDir option to a path that we want to put the asset files that goes with the app into a folder that’s different from the default.

Conclusion

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.