内容未加载，因为它的 MIME 类型“text/html”不是“text/css”

Question

我尝试在 Heroku 上部署我的 MERN 应用程序，但是当尝试运行“heroku local”时，localhost 5000 显示一个空白页面，并且控制台显示以下错误。这些是错误：

我已经尝试了很多解决方案，但都没有奏效。

这是来自节点应用程序的 package.json 文件：

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-handlebars": "^5.3.3",
    "express-session": "^1.17.2",
    "mongoose": "^5.13.7",
    "nodemon": "^2.0.12",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "react-router": "^5.2.1"
  },
  "devDependencies": {},
  "engines": {
    "node": "14.16"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"cd client && npm run build",
    "install-client":"cd client && npm install",
    "start": "nodemon app.js",
    "heroku-postbuild":"cd client && npm run install-client && npm run build"
    
  },
  "author": "",
  "license": "ISC"
}

这是添加到server.js中的代码sn-p

if (process.env.NODE_ENV == 'production') {
    app.use(express.static('client/build'));
    }
    
 app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});

这是来自 react 应用程序的 package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "history": "^5.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

我认为问题可能是server.js 文件无法正确访问frontend/client 的build 文件夹。你能把这些都删掉吗：

if (process.env.NODE_ENV == 'production') {
    app.use(express.static('client/build'));
    }
    
 app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});

并添加：

app.use(express.static(path.join(__dirname, './client/build')));

我假设您的client 文件夹和server.js 文件处于同一级别，这就是为什么它是./client... 如果不是，请相应地定义路径路径。请让我知道它是否有效。