How can I set production build path in vue-cli?

Question

I'm using the vue-cli tool to develop vuejs apps, and I'm developing a server too, so i want to build the /dist folder in my server to send it to the browser as static, but I don't even know where the /dist folder is.

There is a webpack.prod.config.js file (I think is the webpack config for production) and in the path-output field I tried to wirte the path but didn't work.

See cli.vuejs.org/config/#vue-config-js and cli.vuejs.org/config/#outputdir — Phil
The /dist folder is the default output dir of your build script. So, unless you modify the output dir in your vue.config.js, running npm run build will create that folder for you, containing the production build. The contents of that dir are what you should deploy on a production server (after you build). And it is static. — tao
@fxndvi Please take a look at my answer and let me know if it helped you or if you have any other related questions . — Pascal Lamers
@fxndvi Please take a look at my answer below and mark as correct answer if it helped you , thanks ! — Pascal Lamers

Pascal Lamers Pascal Lamers · Accepted Answer · 2020-05-04T07:16:17

/dist is just a default setting by VueJS. If you want to modify this : as the documentation from VueJS states :

Always use outputDir instead of modifying webpack output.path.

Create a vue.config.js as an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json).

The file should export an object containing options:

// vue.config.js
module.exports = {
  // options...
}

As otheres already stated in the comments, use outputDir to specify the directory where the production build files will be generated in when running vue-cli-service build. Note the target directory will be removed before building (this behavior can be disabled by passing --no-clean when building).

// vue.config.js
module.exports = {
  outputDir : ''
}

How can I set production build path in vue-cli?

1 Answers