React 构建与开发有很大不同

发布于 2025-01-13 07:43:57 字数 2042 浏览 0 评论 0原文

谢谢你想尝试帮助我！

当我构建 React Web 应用程序时，它看起来与开发模式非常不同。我使用 serve -s build 来观察应用程序的构建时间。但在我的在线 Digitalocean 服务器上，它看起来也不会与开发中的一样。所以它可能与 React 或者它的构建方式有关。这是在开发模式下：

这是构建时的情况：

所以看起来 CSS 或 Javacript 没有正确编译。这是我的 package.json

{
  "name": "websitedominique",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.4.2",
    "@mui/styled-engine-sc": "^5.4.2",
    "@react-hook/mouse-position": "^4.1.3",
    "@rehooks/window-size": "^1.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "concurrently": "^7.0.0",
    "cors": "^2.8.5",
    "express": "^4.17.3",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "swiper": "^6.8.4",
    "use-react-dimensions": "^2.0.1",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

我希望有人可以帮助我。感谢您的帮助！

原文

Thanks you want to try to help me!

When I build my React web app it looks very different from the development mode. I use serve -s build to watch when the app is build. But also on my online Digitalocean server, it won't look the same as in development. So it probably has something to do with React or how it was build.
This is in development mode:

This is when it is build:

So it looks CSS or Javacript did not compile correctly.
This is my package.json

{
  "name": "websitedominique",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.4.2",
    "@mui/styled-engine-sc": "^5.4.2",
    "@react-hook/mouse-position": "^4.1.3",
    "@rehooks/window-size": "^1.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "concurrently": "^7.0.0",
    "cors": "^2.8.5",
    "express": "^4.17.3",
    "framer-motion": "^4.1.17",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "swiper": "^6.8.4",
    "use-react-dimensions": "^2.0.1",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

I Hope someone can help me with this. Thanks for all help!

分享到QQ

分享到微博