如何在 Vue.js 构建上重命名索引.html?

Question

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

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

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

但是输出文件仍然index.html

Answer 1

你可以只使用

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

作为 Vue CLI 默认选项来更改文件

Answer 2

由于您正在创建一个 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 上设置了一个 laravel-vue-cli-3 示例 https://github.com/yyx990803/laravel-vue-cli-3 您可以在其中查看

更新了以前版本的 vue-cli

如果你使用的是 vue webpack 模板，那么在 config 文件夹中有一个索引.js文件。在 module.exports 中，您将找到以下内容，您可以在其中设置输出：

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

只需使用 dapp 更改索引.html.html这应该有效。

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