Vue.js - 冲突中的错误：多个资产向同一文件名index.html发出不同的内容

Question

\n如果我在 macbook 上创建一个新的 vue.js 项目并使用“npm runserve”编译它，我会收到以下错误。
自从创建文件以来我没有更改过任何文件。\n

markus@Markuss-MBP meinerstesprojekt % npm run serve\n\n> meinerstesprojekt@0.1.0 serve\n> vue-cli-service serve\n\n INFO  Starting development server...\n\n\n ERROR  Failed to compile with 1 error                                                                                                                                    6:12:51 PM\n\n error  \n\nConflict: Multiple assets emit different content to the same filename index.html\n\nERROR in Conflict: Multiple assets emit different content to the same filename index.html\n\nwebpack compiled with 1 error\n

\n

vue.config.js

\n

const { defineConfig } = require(\'@vue/cli-service\')\nmodule.exports = defineConfig({\ntranspileDependencies: true\n})\n\nmodule.exports = {\nchainWebpack: (config) => {\nconfig.resolve.symlinks(true)\n}\n}\n

\n

包.json

\n

{\n  "name": "meinerstesprojekt",\n  "version": "0.1.0",\n  "private": true,\n  "scripts": {\n    "serve": "vue-cli-service serve",\n    "build": "vue-cli-service build",\n    "lint": "vue-cli-service lint"\n  },\n  "dependencies": {\n    "core-js": "^3.8.3",\n    "vue": "^2.6.14"\n  },\n  "devDependencies": {\n    "@babel/core": "^7.12.16",\n    "@babel/eslint-parser": "^7.12.16",\n    "@vue/cli-plugin-babel": "~5.0.0",\n    "@vue/cli-plugin-eslint": "~5.0.0",\n    "@vue/cli-service": "^5.0.1",\n    "eslint": "^7.32.0",\n    "eslint-plugin-vue": "^8.0.3",\n    "vue-template-compiler": "^2.6.14"\n  },\n  "eslintConfig": {\n    "root": true,\n    "env": {\n      "node": true\n    },\n    "extends": [\n      "plugin:vue/essential",\n      "eslint:recommended"\n    ],\n    "parserOptions": {\n      "parser": "@babel/eslint-parser"\n    },\n    "rules": {}\n  },\n  "browserslist": [\n    "> 1%",\n    "last 2 versions",\n    "not dead"\n  ]\n}\n

\n

npm 版本：8.5.3
\nNode 版本：v16.14.0
\nVue 版本：@vue/cli 5.0.1

\n

路径中包含以下文件夹：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 README.md\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 babel.config.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 jsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 public\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 vue.config.js\n

\n

你知道为什么这不起作用吗？不幸的是，我通过网络搜索找不到解决方案

\n

Answer 1

我遇到这个问题是因为项目的路径的文件夹名称中有空格

所以我重命名了项目的路径并且它有效

示例
从user/some path here/your-project-name
到user/somePathHere/your-project-name

一切开始运转。

Answer 2

解决方案：

第一步：将index.html重命名为index.ejs；

步骤2：添加 html: { template: './src/index.ejs' } 到node_nodules/webpack/bin/webpack.js

错误原因可能是：使用脚手架创建项目时，多个文件名称重复。

Answer 3

当您点击vue create your-project-nameSelect ([Vue 3] babel,eslint) 并尝试npm run serve.

您还可以使用它vue ui来启动一个新项目或导入旧项目，并在浏览器的 GUI 中查看项目运行的所有内容，以便找出任何问题。