react在yarn build打包后,打開網頁顯示為空白的解決方案

創建react項目

create-react-app my-app
cd my-app
npm start

構建完這個初始的項目之后,發現項目是可以正常訪問的!

接著就是發布上線

yarn build

控制臺中顯示

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

------------------------------------
該項目假設它位于服務器根目錄下。
您可以使用package.json中的主頁字段來控制它。

打開build文件中index.html文件,在瀏覽器中看到一片空白,打開調試,發現報錯了

image-20201102170905423

解決方法

可以通過修改package.json文件的homepage屬性來修改,

我們打開項目根目錄下的package.json,發現沒有homepage這個屬性,這個時候就需要我們手動加上去,如下:重點: "homepage": "./"

{
  "name": "my-app2",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "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"
    ]
  }
}