Heroku 上的部署失败：Vue-CLI 构建错误

Question

我在 Heroku 上部署 Node.js 应用程序（其中包括 Vue.js 前端）时遇到了持续存在的问题。尽管多次尝试和不同的配置，我的构建始终失败，主要是由于模块解析错误。

申请详情：

• 应用名称：ctms
• 构建堆栈：Heroku-22
• 语言/框架：Node.js 和 Vue.js（前端）

总结：

在构建过程中，会出现一些与模块解析相关的错误。值得注意的是，“axios”、“vue-router”和“bootstrap/dist/css/bootstrap.min.css”等模块被报告为未找到，即使它们是在我的 package.json 依赖项中声明的。以下是一些错误示例：

• 找不到模块：错误：无法解析“/tmp/build_xxxxx/frontend/src”中的“axios”
• 找不到模块：错误：无法解析“/tmp/build_xxxxx/frontend/src”中的“bootstrap/dist/css/bootstrap.min.css”
• 找不到模块：错误：无法解析“/tmp/build_xxxxx/frontend/src/router”中的“vue-router”

故障排除完成：

• 验证了 package.json 和 package-lock.json 中是否存在这些模块。
• 确保所有依赖项都正确安装在本地环境中。
• 清除构建缓存后尝试重新部署。
• 检查本地环境和生产环境之间是否存在潜在差异。

---

这是完整的构建错误日志

----> Building on the Heroku-22 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_PRODUCTION=false
       NPM_CONFIG_LOGLEVEL=error
       USE_NPM_INSTALL=true
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  20.10.0
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 20.10.0...
       Downloading and installing node 20.10.0...
       Using default npm version: 10.2.3
       
-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       
       > [email protected] postinstall
       > npm run build --prefix frontend
       
       
       > [email protected] build
       > vue-cli-service build
       
       All browser targets in the browserslist configuration have supported ES module.
       Therefore we don't build two separate bundles for differential loading.
       
       
       -  Building for production...
        ERROR  Failed to compile with 5 errors9:22:32 PM
       
        error  in ./src/authService.js
       
       Module not found: Error: Can't resolve 'axios' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/authService.js
       
       Module not found: Error: Can't resolve 'jwt-decode' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/main.js
       
       Module not found: Error: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in '/tmp/build_f2759173/frontend/src'
       
        error  in ./src/router/index.js
       
       Module not found: Error: Can't resolve 'vue-router' in '/tmp/build_f2759173/frontend/src/router'
       
        error  in ./src/views/LogView.vue?vue&type=script&lang=js
       
       Module not found: Error: Can't resolve 'axios' in '/tmp/build_f2759173/frontend/src/views'
       
        ERROR  Error: Build failed with errors.
       Error: Build failed with errors.
           at /tmp/build_f2759173/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
           at /tmp/build_f2759173/node_modules/webpack/lib/webpack.js:157:8
           at /tmp/build_f2759173/node_modules/webpack/lib/HookWebpackError.js:68:3
           at Hook.eval [as callAsync] (eval at create (/tmp/build_f2759173/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
           at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_f2759173/node_modules/tapable/lib/Hook.js:18:14)
           at Cache.shutdown (/tmp/build_f2759173/node_modules/webpack/lib/Cache.js:150:23)
           at /tmp/build_f2759173/node_modules/webpack/lib/Compiler.js:1229:15
           at Hook.eval [as callAsync] (eval at create (/tmp/build_f2759173/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
           at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/tmp/build_f2759173/node_modules/tapable/lib/Hook.js:18:14)
           at Compiler.close (/tmp/build_f2759173/node_modules/webpack/lib/Compiler.js:1222:23)
       npm notice 
       npm notice New patch version of npm available! 10.2.3 -> 10.2.5
       npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.5>
       npm notice Run `npm install -g [email protected]` to update!
       npm notice 
       npm ERR! code 1
       npm ERR! path /tmp/build_f2759173
       npm ERR! command failed
       npm ERR! command sh -c npm run build --prefix frontend
       
       npm ERR! A complete log of this run can be found in: /tmp/npmcache.8K3RC/_logs/2024-01-08T21_22_04_505Z-debug-0.log
-----> Build failed
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

Answer 1

不确定到底发生了什么，但现在部署成功了。

可能是再次在前端运行 npm install、清除heroku 缓存以及更改根目录 package.json 中的部分脚本的组合。