我可以在不彈出的情況下更改 create-react-app 中公共文件夾的名稱嗎？

Question

我有一個我已經設置的 create-react-app 項目（express 和 node 連接到后端的 mysql 數據庫，以防萬一），它工作得很好。 我的項目經理告訴我，我需要將“public”目錄的名稱更改為“static”（該目錄保存/將保存我的靜態文件，例如我的 index.html 和我需要提供的任何媒體）為了使其正確部署，但是我能找到的唯一解決方案是彈出，以便我可以更改“PUBLIC_URL”的值。 目前，當我運行“npm run start”時出現錯誤，其中記錄：“找不到所需的文件。 名稱：index.html'，它仍在公共目錄中搜索（我已將其更改為“靜態”）。 我的代碼中沒有任何地方引用公共文件夾。

根據我的理解（如果我錯了，請有人糾正我）， PUBLIC_URL 變量由 create-react-app 設置為公共文件夾的路徑。 我想將其更改為靜態文件夾，但我發現的唯一解決方案似乎可能涉及彈出然后手動更改變量。 有沒有辦法在不彈出的情況下設置該變量，或者做一些其他的解決方法來更改該目錄，如果沒有，最簡單的方法是什么（我寧願不彈出，但如果它是唯一的方法）...我真的只需要目錄來更改名稱，並且我發現自己對我認為相當簡單的更改感到沮喪。

謝謝！

編輯：這是我的 package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "PORT=8080 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Answer 1

PUBLIC_URL是一個可以設置的變量。

您可以在控制台中設置它

export PUBLIC_URL="/static"

創建反應應用程序將從process.env.PUBLIC_URL獲取它

您可以在拉取請求線程中閱讀更多相關信息以實現此功能

Answer 2

在基於 Unix 的系統上，您可以使用“mv”命令簡單地將構建文件夾移動到一個新文件夾。

我有這個作為我的 package.json 上的構建腳本：

"build": "react-scripts build && rm -rf static && mv build static"

我構建我的項目，然后刪除任何先例的“靜態”文件夾，最后將我的“構建”文件夾移動到一個新的“靜態”文件夾。

Answer 3

我真的很驚訝它實際上是多么簡單。

1. 使用您選擇的包管理器安裝react-app-rewired 。

2. 在項目的根目錄創建一個config-overrides.js文件

3. 將以下代碼粘貼到config-overrides.js

const path = require('path');
module.exports = {
    paths: function (paths, env) {
        // Changing public to static
        paths.appPublic = path.resolve(__dirname, 'static');
        paths.appHtml = path.resolve(__dirname, 'static/index.html');
        return paths;
    }
}

4. 在項目的根目錄創建一個.env文件並寫入PUBLIC_URL='./static'

希望這可以幫助任何嘗試這樣做的人。

Answer 4

package.json.scripts（適用於 WINDOWS）

"start03": "set FOLDER=chapter03 && react-app-rewired start",
"build03": "set FOLDER=chapter03 && react-app-rewired build", 

react-app-rewired

    const path = require('path');
    module.exports = {paths: function (paths, env) {

          const folder = process.env.FOLDER.trim()

           // Changing public to static
           paths.appPublic = path.resolve(`${ __dirname }/src/${ folder }/_public`)
           paths.appHtml = path.resolve(`${ __dirname }/src/${ folder }/_public/index.html`)
           paths.appIndexJs = path.resolve(`${ __dirname }/src/${ folder }/index.js`)
           paths.appBuild = path.resolve(`${ __dirname }/build/${ folder }`)

           return paths;
        },
    }