如何編輯 React 生產構建的 JSON 文件

Question

在我的開發人員版本中，我有一個包含一個數據的 JSON 文件，我希望能夠在生產版本中更改該數據。 我使用 npm run build 進行構建。 我找不到那個 JSON 文件。 我正在為某人制作這個網站，所以我想通過使用 JSON 來輕松更改頁面內容。

// src/json/download.json
{
    "file" :  "download.png"
}

This is how I get the json file
const file = require("../json/download.json").file

const filePath = "download/" + file;

const Nav = () => {
    return (
        <Link className="dcm0cujv48 abled" to={filePath} target="_blank" download={file}>
            <p className="fs-14 fw-700 wspwho0gps">
                <i class="fas fa-cloud-download-alt fs-14"></i>
                Download
            </p>
            <p className="yb08fmpwlp"></p>
        </Link>
    )
}

Answer 1

你可以檢查你是在開發還是生產

function isProduction(){
return process.env.NODE_ENV === "production"
}

然后在你的代碼中

const filePath = "download/" + isProduction() ? pathToProductionFile : pathToLocalFile;

然后在您的腳本中，您需要使用標志“NODE_ENV=production”創建另一個構建腳本

或者設置多個.env文件，查看https://www.npmjs.com/package/dotenv例如.env.local

file=download.png

和.env.production

file=production-download.png

然后在你的代碼中你可以使用

process.env.file 

作為保存文件值的變量，並且會因本地和生產而異