读取 src 文件夹外的 json 文件答案

【问题标题】：Read json file outside src folder读取 src 文件夹外的 json 文件
【发布时间】：2019-06-06 04:53:41
【问题描述】：

我的 reactjs 应用程序有一个导航组件，它将映射到一个对象数组（需要 json 文件）

此 json 文件是必需的，基于登录的用户，即 menu_admin.json、menu_superadmin.json 等

在开发版本中，我可以要求这个文件来显示菜单。但是在我创建 reactjs 构建文件（npm run build）并将其作为生产构建之后。此生产版本不会读取该文件。

注意：jsonfile 在 src 文件夹之外，为什么？因为文件可能会动态更改。

menu_superadmin.json

[
    {
        "menuid": 1,
        "menuname": "home"
    },{
        "menuid": 2,
        "menuname": "item"
    },{
        "menuid": 2,
        "menuname": "setting"
    }
]

menu_admin.json

[
    {
        "menuid": 1,
        "menuname": "home"
    },{
        "menuid": 2,
        "menuname": "item"
    }
]

menu_user.json

[
    {
        "menuid": 1,
        "menuname": home
    }
]

2019 年 6 月 6 日编辑 这就是代码的样子

const data = ['admin', 'superadmin', 'user'];
const userrole = 1; /* get this by login */
function menu(data) {
    /* load the json file */
    const menuArray = require(`./../menu/menu_${data[userrole]}.json`) /* file inside this json may dynamically changing depends on the settings */
    /* map the json file */
    const menu = menuArray.map((index) => {
        return <div key={index.menuid} onClick={somethingsomething}>
            {index.menuname}
        </div>
    })
    return menu
}

预期结果是读取 menu_superadmin.json
实际结果：
- 开发环境：我能够阅读菜单
- 生产/构建：无法读取菜单

文件夹结构：

--menu ----menu_admin.json ----menu_superadmin.json --src ----application

2019 年 6 月 7 日编辑
终于找到了在 src 文件夹之外获取 json 文件的方法，方法是将文件夹移动到公用文件夹，然后使用 fetch('/path') 而不是 require('path')。并从后端创建一个逻辑，以使该 json 文件在生产环境中构建文件夹

【问题讨论】：

贴出一些你如何阅读和使用这些 JSON 文件的代码。
使用 import 读取您的 JSON 并显示您的代码以获得更多说明。
@FamilRestu 参考此链接以导入您的 JSON stackoverflow.com/questions/39686035/import-json-file-in-react

标签： reactjs

【解决方案1】：

看起来您在 src 目录之外有 json 文件，因此当您在本地构建时，它可以正常工作，因为它是内置在工作目录中的。

尝试在构建过程中将 json 文件保存到 src 中。这是构建过程的经典案例，即使在年级我们在创建 jar 文件时也看到了这一点。

【讨论】：