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

Question

Maybe 8-9 months ago I created a Webpacked Vue.js project with vue-cli and was able to modify /build/webpack.dev.conf.js to have it put the "compiled" index.html and JavaScript / CSS files in the right folders in my Flask app when I run npm run build.

I am now showing someone else how to create a Vue.js / Flask app and I see that the way vue-cli works seems to have changed, so that I no longer have access to the /build/ folder.

I read the docs and they seemed to say that it now abstracts away the Webpack config ("Since @vue/cli-service abstracts away the webpack config..."), but that if I want to see Webpack's config options, I can do vue inspect > output.js. I did that and don't see the entries in there that I changed when I did this eight months ago:

/build/webpack.prod.conf.js:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

/config/index.js:

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    index: path.resolve(__dirname, '../../server/templates/app.html'),
+    assetsRoot: path.resolve(__dirname, '../../server/static/app'),
+    assetsSubDirectory: '',
+    assetsPublicPath: '/static/app',

It looks like the vue build command-line command can accept an argument that allows you to specify the output directory, but I need to specify two different directories: one for the HTML file (which should live in Flask's /templates/ folder), and another for the JavaScript / CSS code (which should go in Flask's /static/ folder).

Answer 1

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.