如何在vue.js构建上重命名index.html?

时间:2018-08-17 08:02:37

标签: webpack vue.js vue-cli

我想重命名index.html生成的npm run build。我在webpack配置中找不到任何内容。

我还创建了一个vue.config.js,描述如下:https://github.com/vuejs/vue-cli/tree/dev/docs/config

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

但是输出文件仍然是index.html

2 个答案:

答案 0 :(得分:5)

由于您正在创建vue.config.js,因此我假设您正在使用vue-cli 3.0。

鉴于您应在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;
            });
        }
     },
};

Vue的创建者已在github https://github.com/yyx990803/laravel-vue-cli-3上设置了一个laravel-vue-cli-3示例,您可以在其中查看

更新为先前版本的vue-cli

如果您正在使用vue Webpack模板,则在config文件夹中有一个index.js文件。在module.exports内部,您将找到以下可以设置输出的地方:

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

    ...
},

只需将dapp.html更改为index.html即可,

如果您正在使用webpack模板,则可以在http://vuejs-templates.github.io/webpack/backend.html上查看更多详细信息。

答案 1 :(得分:0)

您可以使用

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

作为更改文件的vue cli默认选项