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

vagrantir · 2018-08-22T20:26:23Z

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

The text was updated successfully, but these errors were encountered:

LinusBorg · 2018-08-22T20:31:05Z

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 · 2018-08-22T20:56:32Z

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 · 2018-08-23T00:36:21Z

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 · 2018-08-23T11:39:09Z

@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 · 2019-03-26T21:51:29Z

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 · 2019-03-26T22:02:48Z

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 · 2019-03-26T23:22:02Z

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

piboistudios · 2019-03-27T15:27:52Z

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 · 2019-03-30T15:56:01Z

Thanks, will have a look tonight.

arterrey · 2019-04-07T09:25:02Z

+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 · 2019-05-17T03:58:07Z

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 · 2019-05-23T23:33:44Z

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.

https://vue.test/home
click the about link
Vue router pushes to https://vue.test/admin/about
click the home link
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 <laravel_root>/client/<vue_project>

fixes #2327 fixes #4247 (cherry picked from commit 9faddce)

LinusBorg added the needs reproduction This issue is missing a minimal runnable reproduction, provided by the author label Aug 22, 2018

vagrantir mentioned this issue Aug 23, 2018

Documentation on integration with backend frameworks #1563

Open

LinusBorg removed the needs reproduction This issue is missing a minimal runnable reproduction, provided by the author label Aug 23, 2018

jost-s mentioned this issue Sep 27, 2018

Test and dev builds omit css and image files #2625

Closed

haoqunjiang added the documentation label Jan 17, 2019

LinusBorg added the needs team repro We acknowledged your report and will soon try to reproduce it label Mar 30, 2019

LinusBorg self-assigned this Mar 30, 2019

fnick851 mentioned this issue May 17, 2019

vue-cli-service build --watch runs in development and ignores publicPath #3731

Closed

shadow-light added a commit to shadow-light/vue-cli that referenced this issue May 24, 2019

fix: indexPath should also affect non-production builds (vuejs#2327)

1a76155

shadow-light mentioned this issue May 25, 2019

fix: indexPath should also affect non-production builds (#2327) #4057

Merged

shadow-light added a commit to shadow-light/vue-cli that referenced this issue Jul 2, 2019

fix: indexPath should also affect non-production builds (vuejs#2327)

2f9c83c

haoqunjiang closed this as completed in 9faddce Jul 14, 2019

haoqunjiang pushed a commit that referenced this issue Jul 18, 2019

fix: indexPath should also affect non-production builds (#4057)

745935a

fixes #2327 fixes #4247 (cherry picked from commit 9faddce)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

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

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

Comments

What problem does this feature solve?

What does the proposed API look like?