how to rename index.html on a vue.js build?

Question

I want to rename the index.html genrated by npm run build. I can't find anything in the webpack config.

I've also create a vue.config.js described here: https://github.com/vuejs/vue-cli/tree/dev/docs/config

module.exports = {
  pages: {
    index: {
      filename: 'dapp.html',
    }
  }
};

But the output file is still index.html

Answer 1

You can just use

module.exports = {
  indexPath: 'index_bundled.html'
}

as a vue cli default option to change the file

Answer 2

Since you are creating a vue.config.js I assume you are using vue-cli 3.0.

Given that you should add the following lines on your vue.config.js.

module.exports = {
    // modify the location of the generated HTML file.
    // make sure to do this only in production.
    chainWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            config.plugin('html').tap((opts) => {
                opts[0].filename = './dist/dapp.html';
                return opts;
            });
        }
     },
};

Creator of Vue has set a laravel-vue-cli-3 example on github https://github.com/yyx990803/laravel-vue-cli-3 where you can take a look

Update for previous version of vue-cli

If you are using vue webpack template then inside config folder there is a index.js file. Inside module.exports you will find the following where you can set your output:

...
build: {
    // Template for index.html
    index: path.resolve(__dirname, './dist/index.html'),

    ...
},

just change index.html with the dapp.html and that should work.

If you are using webpack template you can see more details at http://vuejs-templates.github.io/webpack/backend.html.