Vue-cli: outputDir config not working

[oswaldofreitas]

Version

3.0.4

Reproduction link

https://github.com/oswaldofreitas/vuecli_outputdir_issue

Node and OS info

Node 10.11.0 / npm 6.4.1 / macOS Mojave 10.14

Steps to reproduce

1) $ vue create project
2) $ vue ui
3) run build task (not sure if this step is mandatory)
4) change outputDir to "dist2"
5) run build task

What is expected?

built files created in the new output folder

What is actually happening?

files are still created in the default "dist" folder

---

I tried changing outputDir value to:

• "dist2"
• "../htdocs/js/client-prod-new"
• path.resolve('../htdocs/js/client-prod-new')
  and none worked

[oswaldofreitas]

Oh, after these steps it worked:

• stopped vue ui
• deleted dist folder from previous build
• ran npm run build
  and now files were generated in the new folder

[oswaldofreitas]

hmmm, now trying to build on vue ui it uses the default dist value again, so I guess issue is only in the gui

[edgraaff]

Next to the button to execute the build command there's a settings dialog which contains the output dir. Clear that value and outputDir from vue.config.js will be used.

[borantula]

changing it within vue ui created the file below which started working with custom directory. Haven't debugged yet which one helped.

module.exports = {
    publicPath: undefined,
    outputDir: '../public/site/dist',
    assetsDir: undefined,
    productionSourceMap: undefined,
    parallel: undefined,
    css: undefined
}

[RomainLK]

I just had the same problem. It's indeed happening when using the default build task on the UI.

The reason is that this task has actually an output directory dist as default parameter. It will always override the value vue.config.js, by using the --dest argument of the command line.

My fix so far is to just set that parameter to an empty string so that the build task use the value from vue.config.js.

edit: actually same fix as edgraff. sorry for repeat

[fabianhijlkema]

I thought this parameter under build was confusing as well, shouldn't it be empty as default in stead of overriding as default?

[chasegiunta]

Wait, this seems crazy to me. @LinusBorg Shouldn't vue.config.js be the source of truth? Or at least if you're building through the UI, the parameters should be read/copied from vue.config.js?

You can literally set the `outputDir' (or some other configuration) one screen up in the UI, and it's completely ignored if you run the tasks one screen down.

[Deadpoolddt]

Wait, this seems crazy to me. @LinusBorg Shouldn't vue.config.js be the source of truth?

I would say it's the other way around, because those params in the gui are indeed comandline parameters so they are meant to override main config on the fly.

Or at least if you're building through the UI, the parameters should be read/copied from vue.config.js?

This however makes sence because it's what normally should be expected, values should extend from vue.config if any, and fallback to "default values" only if there is not settings yet.

[RomainLK]

What I expected when I encountered this issue is that vue.config.js was used to determine the output dir. The GUI shouldn’t have a default value set to /dist. It’s confusing because:

• it’s the same value as the default for vue.config.js yet it’s in fact an override. I found out about the outputDir when i modified the outputDir in config file and had different behaviour between the CLI and the GUI.
• it’s hidden in parameters and can easily be missed in the output log.

An empty outputDir for the GUI seems to be a more sensible default imo, fallbacking this to vue.config.js

[diglabsityler]

If anyone else has this problem I solved it by using npm run build in the root of my directory Instead of vue build. This runs the vue cli module installed in the project directory after running vue create application_name. I was using the globally installed before vue cli and it wasn't workin.g

[marcnewton]

I don't understand what the point is in the VUE CLI vue build command if it ignores what you setup in vue.config.js and uses what is set in parameters of the build command where the value is actually read from package.json or fallsback to dist, it is not read from vue.config.js according to the description in the UI modal this is confusing!

This is the description in the CLI Tools when you click on parameters button on the build command and read the option description of ``:

If enabled, hard-coded arguments in your package.json file will be replaced with the values defined below...

Note that it specifically says package.json not vue.config.js...

https://cli.vuejs.org/config/#outputdir does not mention anything about the config value for this parameter having to be set in package.json.
This sub topic is under the main topic of https://cli.vuejs.org/config/#vue-config-js

HOWEVER

1) Override hard-coded arguments on/off has no impact on any combination of settings.

2) Deleting any content out of the Output Directory field in the build parameters screen DOES make it fallback to your settings in vue.config.js

For my GitHub templates this bug in the build parameters screen for production build is a breaking setting, I have to inform other developers of these extra steps to fix this bug and the obscurity surrounding this setting.

Clearly there is some inconsistency between the documentation and what is actually happening vs what is expected to happen.

I tried searching around for any specific instructions that explicitly described the usage of Output Directory in package.json in relation to the screenshot above and came up with nothing...

Every time I start a new VUE project many months later, I find my self reading the docs, going through the settings, doing what I am told and it not working... then eventually remember "I had this issue last time what was the fix?" and I have to rediscover what I did to get it working.

Every year that I have googled this issue this thread comes up as top result and the dagavu starts and always ends with the question of how is this still not been fixed, I have the latest version of the CLI?.
Especially this year, I have a brand new computer and everything is the latest version 4.2.3.

I don't know why @LinusBorg closed this issue and not address it?

[LinusBorg]

I don't know why @LinusBorg closed this issue and not address it?

Good question. I can't answer it as that was over a year ago. Sorry :(

Just a quick note:

Note that it specifically says package.json not vue.config.js...

That's likely just a small inaccuracy in the docs.

Just like the UI (like the CLI itself) will write changes to the config to either vue.config.js or a vue field in package.json (depending on which variant you are using), it will also read from both.

Sidenote: From reading he following, it seems to me that you are unaware of that second option:

https://cli.vuejs.org/config/#outputdir does not mention anything about the config value for this parameter having to be set in package.json.
This sub topic is under the main topic of https://cli.vuejs.org/config/#vue-config-js

But at the very top of that page it say (highlighting mine):

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.

Concerning your actual issue: Unfortunately I have a bit of a problem following your explanation of what exactlky does and doesn't work, so I'll try to repeat:

The problem, according to what you experience, is basically that the "override hardcoded arguments" option is deactivated in the UI, but nonetheless works as if it's active, that means: the build command that the UI runs will use what is defined in the "Output Directory" field event though it should not, as the oltion is deactivated?

[marcnewton]

The problem, according to what you experience, is basically that the "override hardcoded arguments" option is deactivated in the UI, but nonetheless works as if it's active, that means: the build command that the UI runs will use what is defined in the "Output Directory" field event though it should not, as the oltion is deactivated?

Correct sir.

The deactivated override is overriding the value of my setting of outputDir: 'public/app' in vue.config.js with the default value of dist, defiantly incorrect behavior.

[LinusBorg]

Got it, thanks.

[marcnewton]

By they way you just mentioned that the settings in that Build Parameters screen should be written to to package.json or config.vue.js?

It is not doing that, it actually saves all of those settings to %HOMEPATH%/.vue-cli-ui/db.json
So the project build settings do not get distributed to other collaborators and again the settings in that cause have to be manually passed on to another developer setting up an existing project.

[LinusBorg]

No, I mean the actual config values, under the "Configuration" page (publicPath, runtimeCompiler etc.pp.), not the setting that you set for your task paramters.

[marcnewton]

Understood, Yes those work as expected then, thanks for clarity on this.

[Akryum]

FYI the "override hardcoded arguments" is about arguments in the scripts in package.json, for example vue-cli-service build --dest ./out.