ERROR in Conflict: Multiple assets emit different content to the same filename index.html

Question

Actual issue:

• While running the vue.config.js configuration, the following issue occurred: ERROR in Conflict: Multiple assets emit different content to the same filename index.html

  While checking the dist folder:

  dist_dev
  static
  home
    index.html
  index.html
  

  • dist_dev/index.html :- loads fine as per the chunk configuration from pages/index in vue.config.js.
  • dist_dev/home/index.html :- is not rendered correctly using the chunk configuration of pages/home in vue.config.js. The issue is described below: dist_dev/home/index.html:

  Html Webpack Plugin:
  <pre>
    ReferenceError: VUE_APP_CDN_ENVIRONMENT_URL is not defined
  
   - loader.js:12 eval
      [home.html?.]/[html-webpack-plugin]/lib/loader.js:12:11
  
   - loader.js:15 module.exports
      [home.html?.]/[html-webpack-plugin]/lib/loader.js:15:3
  
   - index.js:612 
      [employee-details]/[html-webpack-plugin]/index.js:612:16
  
   - async Promise.all
  
  </pre>
  

  • I tried to implement CSP Policy within vue.config.js plugins using html-webpack-plugin and strict-csp-html-webpack-plugin.
  • My project is a combination of Vue 3 and webpack build project.
  • Multiple page entries are set up within the pages configuration in vue.config.js.
  • Here, I'm sharing my environment details, vue.config.js and source folder path.

  Environment:

  • Vue Version: 3.3.2
  • Element Plus Version: 2.3.4
  • Browser / OS: Chrome
  • Build: vue-cli-service build (webpack5)

  vue.config.js

  const { defineConfig } = require('@vue/cli-service')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const StrictCSPHTMLWebpackPlugin = require('strict-csp-html-webpack-plugin')
  const configureWebpack = {
    resolve: {
      fallback: {
        os: false,
        path: false,
        fs: false,
        crypto: false,
        buffer: false,
        url: false
      }
    },
    plugins: [
      new HtmlWebpackPlugin(),
      new StrictCSPHTMLWebpackPlugin(HtmlWebpackPlugin, {
        enabled: true,
        enableTrustedTypes: false,
        enableUnsafeEval: true,
        hashScript: true,
        hashStyle: true
      })
    ]
  }
  
  if (process.env.VUE_APP_ENV === 'Prod') {
    configureWebpack.devtool = 'hidden-source-map'
  }
  module.exports = defineConfig({
    configureWebpack: configureWebpack,
    lintOnSave: true,
    assetsDir: 'static',
    outputDir:
      process.env.VUE_APP_ENV === 'Prod'
        ? 'dist_prod'
        : 'dist_dev',
    productionSourceMap: false,
    chainWebpack: config => {
      const IS_VENDOR = /[\\/]node_modules[\\/]/
      config.optimization.splitChunks({
        cacheGroups: {
          index: {
            name: 'chunk-index-vendors',
            priority: -11,
            chunks: chunk => chunk.name === 'index',
            test: IS_VENDOR,
            enforce: true
          },
          home: {
            name: 'chunk-track-vendors',
            priority: -11,
            chunks: chunk => chunk.name === 'home',
            test: IS_VENDOR,
            enforce: true
          },
          common: {
            name: 'chunk-common',
            priority: -20,
            chunks: 'initial',
            minChunks: 2,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    },
    pages: {
      index: {
        entry: 'src/pages/index/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        chunks: ['chunk-common', 'chunk-index-vendors', 'index']
      },
      home: {
        entry: 'src/pages/home/main.js',
        template: 'public/home.html',
        filename: 'home/index.html',
        chunks: ['chunk-common', 'chunk-home-vendors', 'home']
      }
    },
    publicPath: '/',
    runtimeCompiler: false
  })
  

  Source Files Path:

  public
    static
      fonts
      js
      img
    index.html
    home.html
  src
    assets
    router
      index.js
      homeRouter.js
    pages
      index
        App.vue
        main.js
      home
        App.vue
        main.js
    views
      pages.vue
      page.vue
  

How can I solve these issues and run the project with CSP policy with multiple entries?