Question

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

根据登录的用户（例如menu_admin.json，menu_superadmin.json等），此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文件在生产环境中建立文件夹

Answer 1

您似乎在src目录之外拥有json文件，因此，当您在本地进行构建时，它的工作仅是因为它内置在工作目录中。

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

在src文件夹外读取json文件

1 个答案: