Vue-cli: How to change the output directory of .js / .css files

Created on 27 Jul 2018 · 6Comments · Source: vuejs/vue-cli

Version

3.0.0-rc.5

Node and OS info

Node: 8.9.0 / Windows 10

Steps to reproduce

Tried changing the dir path of js & css files from /js/file.js to /file.js and /css/file.css to /file.css using the assetsDir. Yes i disabled the hash generation but i get assetsDir is not allowed when building. Copy pasted the code from here but by changing assetDir and filenames.

What is expected?

build files are all in /dist folder rather than in /dist/js or /dis/css folders.

What is actually happening?

Build fails with error assertsDir is not allowed

Source

minkBoy

Most helpful comment

assetsDir is a sub directory relative to outputDir and it's already empty by default.

The correct config to get what you want:

module.exports = {
    chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: '[name].[ext]' }));
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
    }
  }
};

However you really should be using a proper local static server instead, like serve.

yyx990803 on 28 Jul 2018

👍35 ❤10 😄3 🎉2 🚀1

All 6 comments

Why?

yyx990803 on 27 Jul 2018

👎14 😕4 👍1

IIS is having issues serving static assets in sub folders. So my hope is above solution to bypass the issue.
Similar to this issue : link

minkBoy on 27 Jul 2018

Well, that seems weird. But that's not a good reason to provide an extra option in vue.config.js for this, so I don't honk we will add it.

You can use the chainWebpack option to manipulate the output.filename and the `name option of all the asset loaders for images etc.

LinusBorg on 28 Jul 2018

😕2

assetsDir is a sub directory relative to outputDir and it's already empty by default.

The correct config to get what you want:

module.exports = {
    chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: '[name].[ext]' }));
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
    }
  }
};

However you really should be using a proper local static server instead, like serve.

yyx990803 on 28 Jul 2018

👍35 ❤10 😄3 🎉2 🚀1

mark~

lorainwings on 23 Nov 2018

I'm building a chrome extension which has several different output "pages" for the background/options/popup/content scripts. This is working great with the existing config, but now I need another "page" that will build my service worker script. This script must live at the root of my dist folder so the scope will be correct and it can talk to my extension, but there is no easy way to get it out of the js folder. If I could have the option to specify an outputDir for each page object in the config, this would be trivial. Please consider this scenario, thank you.