如何在 vue.js 构建中重命名 index.html？

Posted 2023-02-22

【中文标题】如何在 vue.js 构建中重命名 index.html？

【英文标题】：how to rename index.html on a vue.js build?

【发布时间】：2019-01-24 05:31:31

【问题描述】：

我想重命名由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

【参考方案1】：

你可以使用

module.exports = 
  indexPath: 'index_bundled.html'

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

【讨论】：

谢谢！这是一个优雅的解决方案。

如何动态改变索引？喜欢使用“if”语句？

【参考方案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 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 看到更多详细信息。

【讨论】：

我不使用 vue-cli 3.x。我已经更新到 vue-cli 3 来测试您的解决方案，但输出仍然是 index.html。您知道如何使用 cli 版本 2.9.6 解决此问题吗？我也会做一些研究。

@MarcS82 我已经更新了我对 vue-cli 以前版本的答案。希望对您有所帮助。

如何动态改变索引？喜欢使用“if”语句？