How to change the output directory of .js / .css files

[minkBoy]

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

[yyx990803]

Why?

[minkBoy]

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

[LinusBorg]

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.

[yyx990803]

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.

[lorainwings]

mark~

[wpatter6]

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.

[Ramadanko]

@yyx990803
it doesn't work for me because i think i don't use the comment section that tells webpack what is the chunk name is

import Vue from "vue";
import VueRouter from "vue-router";
import AppRoutes from "./AppRoutes";

Vue.use(VueRouter);

const routes = AppRoutes.filter(({ name }) => name !== "divider").map(
  ({ path, name, view }) => {
    return {
      path,
      name,
      component: () => import(`../views/${view}.vue`),
    };
  }
);

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

and now assets are like this
dist/chunk-2d22d746.js
dist/chunk-2d0e9081.js

may i know how to modify vue.config.js to have the name of the file instead of chunk ?

Thanks