Heroku 应用程序不工作(部署问题?)

Heroku application doesn't work (Deployment problem?)

我已经使用 Heroku 部署了一个使用 JavaScript、Express 和 Node.js 的应用程序,当我在本地主机中手动测试代码时,一切正常,但在 Heroku 中查看时,该应用程序没有有任何功能。

这是构建日志:

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 14.x...
       Downloading and installing node 14.17.5...
       Using default npm version: 6.14.14
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules (package.json)
       audited 50 packages in 0.703s
       found 0 vulnerabilities
       
       
-----> Build
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       audited 50 packages in 0.738s
       found 0 vulnerabilities
       
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 33.1M
-----> Launching...
       Released v18
       https://note-taker-io.herokuapp.com/ deployed to Heroku

在前端 JS 代码中声明用于与 DOM 交互的变量 window.location.pathname === '/notes',请参见此处:

let noteTitle;
let noteText;
let saveNoteBtn;
let newNoteBtn;
let noteList;

if (window.location.pathname === '/notes') {
  noteTitle = document.querySelector('.note-title');
  noteText = document.querySelector('.note-textarea');
  saveNoteBtn = document.querySelector('.save-note');
  newNoteBtn = document.querySelector('.new-note');
  noteList = document.querySelectorAll('.list-container .list-group');
}

这里的问题是,在您的首页,锚标记会将您带到 /notes.html 而不是 /notes:

<a class="btn btn-primary btn-lg mt-4" href="./notes.html" role="button">Get Started</a>

因此,您的变量未声明,因此它们未定义。如果您在 /notes.html.

上,如果您在开发控制台中键入变量的名称,您甚至可以检查这一点

如果您使用 ./notes,前端似乎工作正常。所以只需将 href 属性从 "./notes.html" 更改为 "./notes":

<a class="btn btn-primary btn-lg mt-4" href="./notes" role="button">Get Started</a>