使用静态文件创建electron Create react应用程序发行版 我想要什么

我想创建一个桌面应用程序，读取json数据文件，然后使用该数据在屏幕上呈现内容。json数据文件需要打包到应用程序中

我所做的 跟随一篇文章介绍如何使用CreateReact应用程序并使其在electron中工作

我被困在哪里 到目前为止，我所做的一切都是在开发环境中进行的。我想做一个发行版，目前正在使用electron builder创建一个安装程序，以便我可以发行应用程序

但是，我的数据文件似乎没有打包，或者它们可能是。。。老实说，我说不出来，但在安装后运行electron应用程序时无法访问

代码 package.json 目录结构 需要帮助 有人能教我如何在这种设置中打包静态内容吗？这是可能的吗？为什么这一切如此困难

---

我是一名java开发人员，涉猎过C语言，这两种语言从未让我如此头疼。。。只需读取打包在JAR或DIST文件夹中的文件

看来文件夹毕竟是打包在asar文件中的。但是，您需要相对地从应用程序环境变量访问资产。我设法让它和这个一起工作

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');
const app = electron.remote.app;

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        debugger;
        const appPath = app.getAppPath();
        console.log(appPath);
        const path = app.getPath('userData');
        console.log(path);
        fs.readdir(appPath + '/data', (err, files) => {
            debugger;
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;

注意app.getAppPath（）；这是可行的，但我越来越确信，我宁愿使用C#或Java等成熟技术，然后继续尝试学习react或其他任何web技术。如果您必须将80%的开发时间花在尝试配置应用程序上，然后开发有意义的软件。。。这不值得

{
  "name": "react-electron-poc",
  "version": "0.1.0",
  "private": true,
  "description": "Electron App Poc",
  "author": "Celludriel",
  "devDependencies": {
    "electron": "^1.7.9",
    "foreman": "^2.0.0",
    "react-scripts": "0.8.5",
    "electron-builder": "^20.24.3"
  },
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "nf start -p 3000",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "icon": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    },
    "files": ["**/*", "dist/**/*"],
    "extends": null
  }
}

    Directory: C:\Workspaces\react-electron-poc


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       21/07/2018     10:51                .idea
d-----       21/07/2018      9:34                build
d-----       20/07/2018     19:33                data
d-----       20/07/2018     20:22                dist
d-----       20/07/2018     19:12                node_modules
d-----       20/07/2018     17:22                public
d-----       21/07/2018     10:10                src
-a----       20/07/2018     17:22            285 .gitignore
-a----       20/07/2018     19:12         367115 package-lock.json
-a----       20/07/2018     20:21           1058 package.json
-a----       20/07/2018     18:10             56 Procfile
-a----       20/07/2018     17:22         119451 README.md

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');
const app = electron.remote.app;

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        debugger;
        const appPath = app.getAppPath();
        console.log(appPath);
        const path = app.getPath('userData');
        console.log(path);
        fs.readdir(appPath + '/data', (err, files) => {
            debugger;
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;