如何在Vue CLI中禁用index.html生成以适配Craft CMS集成场景？

配置失效核心原因 #

你现有配置未生效通常是两个原因：一是Vue CLI构建缓存未清理，旧缓存直接复用了之前的构建逻辑；二是你将Vue的构建输出目录直接设为了Craft的web根目录，即使禁用html插件逻辑，也可能残留之前构建生成的index.html文件。

推荐解决方案（优先级从高到低） #

• 方案1：修改构建输出目录（最稳妥，无冲突风险）
  调整vue.config.js配置，将Vue构建产物输出到Craft web根目录的子文件夹内，从根源上避免文件覆盖：

  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    // 构建产物输出到Craft web目录下的dist子文件夹
    outputDir: 'web/dist',
    // 静态资源引用路径对应调整为/dist/
    publicPath: '/dist/',
  
    chainWebpack: config => {
      config.plugins.delete('html')
      config.plugins.delete('preload')
      config.plugins.delete('prefetch')
    }
  })
  

  配置修改完成后，删除项目下node_modules/.cache文件夹清理构建缓存，再执行npm run build，后续Vue构建的所有css、js资源都会存放在web/dist目录下，不会生成index.html到web根目录，你只需要在Craft的对应页面模板中手动引入/dist下的静态资源即可。

• 方案2：修改index.html输出文件名
  如果你确实需要将静态资源直接输出到Craft web根目录，可以保留原有删插件的配置，额外修改html插件的输出文件名，避免和CMS的index.html冲突：

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    outputDir: 'web',
    publicPath: '/',
  
    chainWebpack: config => {
      config.plugin('html').tap(args => {
        // 将Vue生成的入口文件改名，不会覆盖CMS的index.html
        args[0].filename = 'vue-entry.html'
        return args
      })
      config.plugins.delete('preload')
      config.plugins.delete('prefetch')
    }
  })
  

验证操作 #

构建完成后直接检查Craft的web根目录，确认不存在Vue生成的index.html文件，再启动服务测试即可。

内容的提问来源于stack exchange，提问作者user17368086