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.