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

Question

if I create a new vue.js project on my macbook and compile it with "npm run serve", I get the following error. I haven't changed any file since creating it.
markus#Markuss-MBP meinerstesprojekt % npm run serve
> meinerstesprojekt#0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 6:12:51 PM
error
Conflict: Multiple assets emit different content to the same filename index.html
ERROR in Conflict: Multiple assets emit different content to the same filename index.html
webpack compiled with 1 error
vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
module.exports = {
chainWebpack: (config) => {
config.resolve.symlinks(true)
}
}
package.json
{
"name": "meinerstesprojekt",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.8.3",
"vue": "^2.6.14"
},
"devDependencies": {
"#babel/core": "^7.12.16",
"#babel/eslint-parser": "^7.12.16",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-service": "^5.0.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"vue-template-compiler": "^2.6.14"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
npm version: 8.5.3
Node-Version: v16.14.0
Vue-Version: #vue/cli 5.0.1
The following folders are in the path:
├── README.md
├── babel.config.js
├── dist
├── jsconfig.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vue.config.js
Do you know why this doesn't work? Unfortunately, I couldn't find the solution by searching the web

Answer 1

i was having this issue because of the path to the project was having spaces in the folders name
so i renamed the paths to the project and it works
Example
from user/some path here/your-project-name
to user/somePathHere/your-project-name
and everything starts to work.

Answer 2

Solution:
Step 1: Rename index.html to index.ejs;
Step 2: Add html: { template: './src/index.ejs' } to node_nodules/webpack/bin/webpack.js
The reason for the error may be: When the scaffolding was used to create a project, the names of multiple files were duplicated.

Answer 3

When you hit vue create your-project-name Select ([Vue 3] babel,eslint)
and try to npm run serve.
And also you can use vue ui to start a new project or import old one, and see everything about your project run in a GUI in your browser so you can figure out any problem.