Vue-cli: More options for baseUrl and outputDir settings in vue.config.js

[taivu]

What problem does this feature solve?

allowing absolute url's and setting output file name

What does the proposed API look like?

from:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : '/dist/',

  // where to output built files
  outputDir: 'dist'
}

to:

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/'
    : 'https://www.example.com.test:8080/dist/',

  // where to output built files
  output: {
    directory: 'dist',
    filename: 'not-app.js' // allow access to [hash]?
  }
}

[yyx990803]

If you need to adjust filename just use webpack configurations.

[briancampo]

If you need to adjust filename just use webpack configurations.

@yyx990803 I'm not following your recommendation. I have a similar need and am getting outputDir is empty on build.

Are you suggesting to use vue > inspect to eject and edit that way?

[Akryum]

See https://cli.vuejs.org/guide/webpack.html

[taivu]

@briancampo i ended up editing config passed from configureWebpack in vue.config.js.

[briancampo]

BLUF: could this be a RC3 (using RC3 here as well) issue as in #1496 comment this morning

@Akryum and @taivu, that is what I thought but am running into avoid modifying output directly error with the below. Also tried editing the config.plugins["VueLoaderPlugin"] with no luck either

     config.output.publicPath =
      process.env.NODE_ENV === "production"
        ? process.env.VAR1
          ? process.env.VAR2
          : "/main/"
        : "/";

    config.output.path =
      process.env.NODE_ENV === "production"
        ? process.env.VAR1
          ? process.env.VAR3
          : "/public/"
        : "/";

    config.output.filename = process.env.VAR4;

@taivu Sorry to be so dense; could you post what you ended up with

[taivu]

@briancampo This is what I ended up with for my needs.

module.exports = {
  configureWebpack: (config) => {
    config.output.filename = 'myApp.js'
    config.output.chunkFilename = '[name]'
    process.env.NODE_ENV === 'production'
      ? config.optimization.splitChunks.cacheGroups.vendors.name = 'vendors'
      : console.log(config) // dev does not have `optimization.splitChunks`
  },
}