Javascript Heroku-部署React/Express应用程序并获取';无法加载资源';在控制台中请求chunk.js文件时
在Heroku上构建并部署React应用程序后,我在控制台中收到这些错误Javascript Heroku-部署React/Express应用程序并获取';无法加载资源';在控制台中请求chunk.js文件时,javascript,node.js,reactjs,heroku,Javascript,Node.js,Reactjs,Heroku,在Heroku上构建并部署React应用程序后,我在控制台中收到这些错误 Refused to apply style from 'https://radiant-tor-66940.herokuapp.com/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Failed to load reso
Refused to apply style from 'https://radiant-tor-66940.herokuapp.com/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 (Not Found) main.3174e036.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) 1.b1e0c624.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) main.3174e036.chunk.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) manifest.json:1
Manifest: Line: 1, column: 1, Unexpected token. manifest.json:1
index.js
文件位于我的Heroku服务器上的/client/build/
中。这是我的Express服务器发送的文件。服务器正在发送此index.html
文件,但文件本身找不到所需的资源
这会导致加载空白应用程序的问题。出于某种原因,index.html
在/client/build/static/js
中找不到chunk.js
文件。它们肯定在那里,我可以通过heroku运行bash和检查目录来确认
在浏览器中查看index.html
文档时,我可以在底部看到脚本标记调用/static/js
中的chunk.js
文件的位置:
这就是应用程序的rootpackage.json
的外观:
"scripts": {
"test": "jest",
"start": "node server/server.js",
"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
},
"engines": {
"node": "~9.10.1",
"npm": "~5.6.0"
}
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"lodash": "^4.17.11",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"styled-components": "^4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:8000/"
}
这是位于/client
中的React应用程序的包.json
的外观:
"scripts": {
"test": "jest",
"start": "node server/server.js",
"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
},
"engines": {
"node": "~9.10.1",
"npm": "~5.6.0"
}
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"lodash": "^4.17.11",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"styled-components": "^4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"proxy": "http://localhost:8000/"
}
{
“名称”:“客户”,
“版本”:“0.1.0”,
“私人”:没错,
“依赖项”:{
“axios”:“^0.19.0”,
“lodash”:“^4.17.11”,
“反应”:“^16.7.0”,
“react dom”:“^16.7.0”,
“react redux”:“^6.0.0”,
“反应路由器dom”:“^4.3.1”,
“反应脚本”:“2.1.3”,
“redux”:“^4.0.1”,
“redux thunk”:“^2.3.0”,
“样式化组件”:“^4.1.3”
},
“脚本”:{
“开始”:“反应脚本开始”,
“构建”:“反应脚本构建”,
“测试”:“反应脚本测试”,
“弹出”:“反应脚本弹出”
},
“eslintConfig”:{
“扩展”:“反应应用程序”
},
“浏览者”:[
">0.2%",
“没有死”,
“不是ie问题实际上是在我的server.js
文件中,我在这篇文章中没有包括这个文件
最初它是express.static(path\u join(\u dirname,'/client/build'))
它必须是:express.static(path\u join(\uu dirname,../client/build'))
这是因为我的server.js
文件位于/server
中,它试图在/server
中查找/client/build
,而不是在Heroku上查找根应用程序目录