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

by

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.

Update 2023:

If you’re using a vite.config.js file, set the base attribute:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  base: process.env.NODE_ENV === 'production'
          ? './' // prod
          : "https://stackoverflow.com/", // dev
})

Leave a Comment