Documentation: need to explain how used vue.config.js in different build modes

[vagrantir]

What problem does this feature solve?

No any explanation in docs, why in "build --mode development" ignored vue.config.js file.
And how developer can build app with bundled assets and enabled vue-dev-tools

What does the proposed API look like?

vue.config.js:

module.exports = {
...
    outputDir: 'dist',
    assetsDir: 'app',
    indexPath: 'app.html',
...
}

Run:
# vue-cli-service build --mode development
Result:

/dist
/dist/app.html
/dist/app/js
/dist/app/css
/dist/app/img

[LinusBorg]

The config file surely isn't "ignored".

Your issue doesn't seem to be a feature request but rather a bug report, about a behaviour that you feel is wrong or should be documented better.

Unfortunately, you did not provide a reproduction of the behaviour that you feel is wrong? And I don't understand your explanation.

Please provide a repository that clearly demonstrates what your problem is.

[vagrantir]

https://github.com/vagrantir/vue-cli-test
node 8, npm 6, win7
I expect that both command build similar ./dist folder, but in --mode development ./dist have plain structure without bundled css/img assets

./node_modules/.bin/vue-cli-service build

./node_modules/.bin/vue-cli-service build --mode development

[vagrantir]

I`ve got near to expected rusult, by adding next config options:

module.exports = {
...
    css:{
        extract: true
    },
    configureWebpack   : config => {
        if (process.env.NODE_ENV === 'production') {
        } else {
            config.output.filename = assetsDir + '/js/[name].[hash:8].js';
            config.output.chunkFilename = assetsDir + '/js/[name].[hash:8].js';
        }
...
}

Result not the same as I expected, but very similar and index.html contain correct links to the js/css files.
It still not use indexPath and assetsDir options as expected.

[vagrantir]

@LinusBorg I found solution for my case by using Vue.config.devtools in main.js and build --mode production, but it`s not clear from documentation/forum/chat. And in this solution need to additional manipulation for enabling sourceMap.

if (process.env.VUE_DEVTOOLS_ENABLED) {
    Vue.config.devtools = true;
}

Why build doesn`t work as "expected" in any mode? As for me, "expected" mean the same output result, which managed by .env variables.

At least, it would be good to explain deeper in documentation, why "bulid --mode modeName" makes different result.

[piboistudios]

Just an added example of this issue:

I typically use Vue.js in conjunction with ASP.NET, and in order to get this to work properly, Vue needs to spit out CSHTML and not HTML (simple ext. change), and output the CSHTML file into the appropriate directory within the "Views" directory at the root of the project, it also needs to output assets

I want to use Vue.js devtools to inspect my site, however when I build my project in development mode, it definitely ignores my Vue.config.js file (except configureWebpack, and the outputDir, everything else seems to be disregarded):

const path = require('path');
module.exports = {
    // baseUrl: '/content',
    outputDir: '../Views/App',

    assetsDir: '../../Content',
    indexPath: 'Index.cshtml',
    configureWebpack: {
        resolve: {
            alias: {
                "Assets": path.resolve(__dirname, "src/assets"),
                "Mixins": path.resolve(__dirname, "src/mixins"),
                "Views": path.resolve(__dirname, "src/views"),
                "Components": path.resolve(__dirname, "src/components")
            }
        }
    }
}

As you can imagine, the resultant build does not work; it outputs the assets (without content hashes in the names) and the HTML (not CSHTML) all to the same directory ("Views/App")

I am using Vue CLI Service version 3.1.1

ETA: Just tried, same issue exists with CLI version 3.5.1

[LinusBorg]

I build my project in development mode, it definitely ignores my Vue.config.js file

Not saying i don't believe you, you surely experience what you describe.

but this kind of statement doesn't allow us to do anything about your issue, so unless you can provide a project that we can run and see for ourselves, please don't expect this issue to move anywhere.

[piboistudios]

I'll put up a minimal repo in a moment.

[piboistudios]

I build my project in development mode, it definitely ignores my Vue.config.js file

Not saying i don't believe you, you surely experience what you describe.

but this kind of statement doesn't allow us to do anything about your issue, so unless you can provide a project that we can run and see for ourselves, please don't expect this issue to move anywhere.

Here you are. I pretty much just copied the exact same config from above into a brand new Vue project.

https://github.com/piboistudios/minimal-config-repo

[LinusBorg]

Thanks, will have a look tonight.