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

I just had to do this for a new project using the latest Vue-CLI and it was pretty simple: I just needed to have a file called vue.config.js at the top-level of my Vue project and within it I needed the following code:

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

Warning: Vue-CLI will delete the contents of whatever folders you specify to use for its output. To get around this, I created the "SPA" folders within my templates/ and static/ directories.

Note also that the assetsDir is specified relative to the outputDir.

Per the related vuejs guide

WARNING

Some webpack options are set based on values in vue.config.js and should not be mutated directly. For example, instead of modifying output.path, you should use the outputDir option in vue.config.js; instead of modifying output.publicPath, you should use the baseUrl option in vue.config.js. This is because the values in vue.config.js will be used in multiple places inside the config to ensure everything works properly together.

And the related vuejs config reference

TIP

Always use outputDir instead of modifying webpack output.path.

Here's an example vue.config.js that I just verified using vue-cli-service @ 3.0.0-rc.2

const path = require("path");module.exports = {  outputDir: path.resolve(__dirname, "./wwwroot/dist"),  chainWebpack: config => {    config.resolve.alias      .set("@api", path.resolve(__dirname, "./src/api"));  },  pluginOptions: {    quasar: {      theme: 'mat'    }  }}

By default, production files are built into the /dist/ subfolder of your Vue project and they are supposed to be deployed in the root folder of your server ("/"). Hence you will have to copy them to root in order to access the project from your browser. Since this is not always convenient, you may wish to build them for deployment in a subfolder of root e.g. /subdir/vue_project/dist/.

In this case, follow the advice at https://cli.vuejs.org/config/#publicpath to redirect vue-cli to build the project files for this subfolder. To do this, please execute vue ui, then open the cli 3.3+ UI Configuration window at localhost:8000 then change the default value of publicPath to /subdir/vue_project/dist/ and Save changes.

If you wish to go back to development (serve), do not forget to set publicPath back to / before executing serve and accessing localhost:8080.