Heroku部署Vue项目遇Multiple assets emit冲突错误求助
2026-8-23
Heroku部署Vue项目时触发「Conflict: Multiple assets emit different content to the same filename」错误
尝试在Heroku部署Vue项目，推送代码时持续出现资源输出冲突错误，已尝试指定Node版本、更换buildpack、修改server.js等操作，均未解决。以下是部署日志、server.js及package.json代码：
部署日志
Enumerating objects: 95, done. Counting objects: 100% (95/95), done. Delta compression using up to 8 threads Compressing objects: 100% (91/91), done. Writing objects: 100% (95/95), 922.85 KiB | 5.49 MiB/s, done. Total 95 (delta 23), reused 0 (delta 0), pack-reused 0 remote: Compressing source files... done. remote: Building source: remote: remote: -----> Building on the Heroku-20 stack remote: -----> Determining which buildpack to use for this app remote: -----> Node.js app detected remote: remote: -----> Creating runtime environment remote: remote: NPM_CONFIG_LOGLEVEL=error remote: NODE_VERBOSE=false remote: NODE_ENV=production remote: NODE_MODULES_CACHE=true remote: remote: -----> Installing binaries remote: engines.node (package.json): 16.16.0 remote: engines.npm (package.json): unspecified (use default) remote: remote: Resolving node version 16.16.0... remote: Downloading and installing node 16.16.0... remote: Using default npm version: 8.11.0 remote: remote: -----> Installing dependencies remote: Installing node modules remote: remote: > cashflow@0.1.0 postinstall remote: > npm run build remote: remote: remote: > cashflow@0.1.0 build remote: > vue-cli-service build remote: remote: All browser targets in the browserslist configuration have supported ES module. remote: Therefore we don't build two separate bundles for differential loading. remote: remote: remote: - Building for production... remote: ERROR Failed to compile with 10 errors6:33:06 AM remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/signup.04385344.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/login.8bbc6e49.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/dashboard.cb36601d.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/119.cc0d4e84.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/206.076964cc.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/chunk-vendors.c45faf35.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/218.16810e2b.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/862.c30a7c87.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/489.c2352728.js.map remote: remote: error remote: remote: Conflict: Multiple assets emit different content to the same filename js/939.3bc5670c.js.map remote: remote: ERROR Error: Build failed with errors. remote: Error: Build failed with errors. remote: at /tmp/build_db7c88fd/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23 remote: at /tmp/build_db7c88fd/node_modules/webpack/lib/webpack.js:148:8 remote: at /tmp/build_db7c88fd/node_modules/webpack/lib/HookWebpackError.js:68:3 remote: at Hook.eval [as callAsync] (eval at create (/tmp/build_db7c88fd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) remote: at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_db7c88fd/node_modules/tapable/lib/Hook.js:18:14) remote: at Cache.shutdown (/tmp/build_db7c88fd/node_modules/webpack/lib/Cache.js:150:23) remote: at /tmp/build_db7c88fd/node_modules/webpack/lib/Compiler.js:1225:15 remote: at Hook.eval [as callAsync] (eval at create (/tmp/build_db7c88fd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1) remote: at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_db7c88fd/node_modules/tapable/lib/Hook.js:18:14) remote: at Compiler.close (/tmp/build_db7c88fd/node_modules/webpack/lib/Compiler.js:1218:23) remote: npm ERR! code 1 remote: npm ERR! path /tmp/build_db7c88fd remote: npm ERR! command failed remote: npm ERR! command sh -c npm run build remote: remote: npm ERR! A complete log of this run can be found in: remote: npm ERR! /tmp/npmcache.mj21d/_logs/2022-08-06T06_32_22_878Z-debug-0.log remote: remote: -----> Build failed remote: remote: We're sorry this build is failing! You can troubleshoot common issues here: remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys remote: remote: If you're stuck, please submit a ticket so we can help: remote: https://help.heroku.com/ remote: remote: Love, remote: Heroku remote: remote: ! Push rejected, failed to compile Node.js app. remote: remote: ! Push failed remote: Verifying deploy... remote: remote: ! Push rejected to crunch-reporting. remote: To https://git.heroku.com/crunch-reporting.git ! [remote rejected] master -> master (pre-receive hook declined) error: failed to push some refs to 'https://git.heroku.com/crunch-reporting.git'
server.js
const express = require('express'); const serveStatic = require("serve-static") const path = require('path'); app = express(); app.use(serveStatic(path.join(__dirname, 'dist'))); const port = process.env.PORT || 80; app.listen(port); console.log("Listening on port : " + port)
package.json
{ "name": "cashflow", "version": "0.1.0", "private": true, "engines": { "node": "16.16.0" }, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "postinstall": "npm run build", "start": "node server.js" }, "dependencies": { "axios": "^0.27.2", "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^3.5.1", "vuetify": "^2.6.0", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "express": "^4.18.1", "sass": "~1.32.0", "sass-loader": "^10.0.0", "serve-static": "^1.15.0", "vue-cli-plugin-vuetify": "~2.5.1", "vue-template-compiler": "^2.6.14", "vuetify-loader": "^1.7.0" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }
解决方案
1. 清理缓存消除重复构建残留
- 本地执行以下命令，彻底清理依赖和缓存：
rm -rf node_modules package-lock.json npm ci - 在Heroku上禁用依赖缓存，避免旧缓存干扰：
heroku config:set NODE_MODULES_CACHE=false
2. 调整Vue打包配置，避免Source Map冲突
在项目根目录创建vue.config.js，选择以下任一方案：
- 方案A：关闭生产环境Source Map（快速解决）
module.exports = { productionSourceMap: false } - 方案B：自定义哈希规则，确保文件名唯一
module.exports = { configureWebpack: { output: { filename: 'js/[name].[contenthash:10].js', chunkFilename: 'js/[name].[contenthash:10].js' } } }
3. 构建前清理dist目录
修改package.json的build脚本，添加清理步骤，避免旧构建文件干扰：
"scripts": { "serve": "vue-cli-service serve", "build": "rimraf dist && vue-cli-service build", "postinstall": "npm run build", "start": "node server.js" }
安装rimraf依赖：
npm install rimraf --save-dev
4. 检查项目代码中的重复引入
确认项目中没有重复的路由配置、组件导入，或相同名称的chunk配置，这类问题也会导致webpack生成重复文件名。
内容的提问来源于stack exchange，提问作者Akrash Nadeem
相关产品推荐
相关产品推荐
