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>
我已经使用 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>