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.

[arterrey]

+1 also experiencing this issue. However, I only have issue with the indexPath value not being read specificity when running with --watch

However, the following workaround to use multipage mode seems to work: (In my case I need to be able to create theme.pt instead of index.html

// vue.config.js
module.exports = {
  publicPath: '++static++crisko.www',
  // indexPath: 'theme.pt'

  pages: {
      theme: {
          entry: 'src/main.js',
          template: 'public/index.html',
          filename: 'theme.pt'
      }
  }
}

[fnick851]

I am facing a similar situation. I need to output a Classic ASP include file.

I am able to work around using @arterrey 's method combined with some additional rules, to fit my needs. (I don't want the 'head' tag.)

The "pages" config approach, will generate an "index.html" that will never be used. Adding in the "indexPath" rule will not produce this "index.html" file for production mode, but still produces it in development mode since "indexPath" is ignored.

My project here: https://github.com/fnick851/vue-cli-for-classic-asp

[yob-yob]

I just found a way to make it work.

https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

chainWebpack: config => {
    config.plugin("html").tap(args => {
      args[0].filename = "../../resources/views/admin.blade.php";
      return args;
    });
  }

my problem is that.

outputDir: "../../public/admin",
publicPath: "/admin",

I want to tell Vue that all my JS / CSS / IMG (Assets) are found on /admin folder to do this I set my publicPath to "/admin" but now when I try to use Vue-router and go a specific link. it works like this.

1. https://vue.test/home
2. click the about link
3. Vue router pushes to https://vue.test/admin/about
4. click the home link
5. https://vue.test/admin/home

EDIT

found a fix for vue-router

export default new Router({
  mode: 'history',
  base: '/',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

P.S. if you're wondering if I'm using Laravel with this setup, then yes I am. my Vue-Cli project is found on /client/