Vue-cli: How to output all the assets to a specific directory like `static`?

[korewayume]

What problem does this feature solve?

how to change the output assets path?

I mean move dist/js to dist/static/js and dist/css to dist/static/css.

I tried use baseUrl or publicPath option in vue.config.js, but it doesn't work.

What does the proposed API look like?

provide an option to configure the assetsSubDirectory

[korewayume]

I use this vue.config.js.
it output js files in static/js, but can I configure css file in static/css?

module.exports = {
  chainWebpack: config => {
    config.output
      .filename('static/js/[name].[chunkhash:8].js')
  }
};

[korewayume]

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

/*
  vue inspect --mode production > output.js
  [read some source code](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config)
*/

module.exports = {
  compiler: true,
  devServer: {
    proxy: {
      '/php/': {
        target: process.env.SERVICE_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/php/': '/'
        }
      }
    }
  },
  chainWebpack: webpackConfig => {
    if (process.env.NODE_ENV === 'production') {
      const inlineLimit = 10000;
      const assetsPath = 'static/assets';

      webpackConfig
        .output
        .filename(path.join(assetsPath, 'js/[name].[chunkhash:8].js'))
        .chunkFilename(path.join(assetsPath, '/js/chunk[id].[chunkhash:8].js'))

      webpackConfig.plugin('extract-css')
        .use(ExtractTextPlugin, [{
          filename: path.join(assetsPath, 'css/[name].[contenthash:8].css'),
          allChunks: true
        }])

      webpackConfig.module
        .rule('images')
        .test(/\.(png|jpe?g|gif)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: inlineLimit,
          name: path.join(assetsPath, 'img/[name].[hash:8].[ext]')
        })

      webpackConfig.module
        .rule('fonts')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: inlineLimit,
          name: path.join(assetsPath, 'fonts/[name].[hash:8].[ext]')
        })
    }
  }
};

[rhymes]

@korewayume this does not work with new the vue cli with webpack 4

[hoythan]

webpackConfig.plugin('extract-css')
        .use(ExtractTextPlugin, [{
          filename: path.join(assetsPath, 'css/[name].[contenthash:8].css'),
          allChunks: true
        }])

[telmaantunes]

@korewayume thanks!!!

[stevensanborn]

note i have used this

css: {
    sourceMap: false,
    extract: { filename: 'styles.css' },

  },

[LucasKauz]

As @rhymes said it has been fixed in Vue CLI 3.

You will need to insert

// vue.config.js
module.exports = {
  assetsDir: 'static'
}

In your configuration to compile assets to the static/ folder.

[ycshill]

@korewayume how can i use this to the package css(js) has hash bug pictures not