如何在 vue.js 构建中重命名 index.html? [英] how to rename index.html on a vue.js build?

问题描述

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

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

我还创建了一个在这里描述的 vue.config.js:https://github.com/vuejs/vue-cli/tree/dev/docs/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',
    }
  }
};

但是输出文件还是index.html

推荐答案

由于您正在创建 vue.config.js，我假设您使用的是 vue-cli 3.0.

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

鉴于您应该在 vue.config.js 中添加以下几行.

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;
            });
        }
     },
};

Vue 的创建者在 github 上设置了 laravel-vue-cli-3 示例 https://github.com/yyx990803/laravel-vue-cli-3在哪里可以看一下

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

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

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'),

    ...
},

只需使用 dapp.html 更改 index.html 即可.

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

如果您使用的是 webpack 模板，您可以在 http://vuejs-templates.github.io/webpack/backend.html.

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

这篇关于如何在 vue.js 构建中重命名 index.html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！