reactjs - 使用electron + react.js，组件不会在生产版本中呈现

Question

嗨， Electron 和react.js新手。我正在使用antd编写NavBar组件，在开发人员模式下一切正常，但在生产版本中未呈现任何内容，只是黑色(我使用了antd深色主题)。任何提示将不胜感激!

这是我的electron.js文件:

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({width: 900, height: 680 ,webPreferences: {
            nodeIntegration: true}});
    mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
    mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from './components/parts/NavBar'

function App() {

    console.log();
    return (
        <div> 
            <NavBar />
        </div>

    );
}

export default App;

Navbar.js:

import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    DesktopOutlined,
    PieChartOutlined,
    FileOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Tasks from '../sections/Tasks';
import Dashboard from '../sections/Dashboard';
import Profiles from '../sections/Profiles';
import Utilities from '../sections/Utilities';
import Settings from '../sections/Settings';


const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const version = "v0.0.1";
class NavBar extends Component {
    state = {
        collapsed: false,
    };

    onCollapse = collapsed => {
        console.log(collapsed);
        this.setState({ collapsed });
    };

    render() {
        return (
            <Router>

                <Layout style={{ minHeight: '100vh' }}>
                    <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <div>
                            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                                <Menu.Item key="1">
                                    <PieChartOutlined />
                                    <span>Option 1</span>
                                    <Link to="/" />
                                </Menu.Item>

                                <Menu.Item key="2">
                                    <DesktopOutlined />
                                    <span>Option 2</span>
                                    <Link to="/tasks" />
                                </Menu.Item>

                                <Menu.Item key="3">
                                    <FileOutlined />
                                    <span>Option 2</span>
                                    <Link to="/profiles" />
                                </Menu.Item>                        

                                <Menu.Item key="4">
                                    <FileOutlined />
                                    <span>Option 2</span>
                                    <Link to="/utilities" />
                                </Menu.Item>

                                <Menu.Item key="5">
                                    <FileOutlined />
                                    <span>Option 2</span>
                                    <Link to="/settings" />
                                </Menu.Item>
                            </Menu>
                        </div>
                    </Sider>



                    <Layout className="site-layout">
                        <Header className="site-layout-background" style={{ padding: 0 }} />
                        <Content style={{ margin: '0 16px' }}>
                            <Route exact path="/" component={Dashboard} />
                            <Route path="/tasks" component={Tasks} />
                            <Route path="/profiles" component={Profiles} />
                            <Route path="/utilities" component={Utilities} />
                            <Route path="/settings" component={Settings} />
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>{version}</Footer>
                    </Layout>
                </Layout>
            </Router>

        );
    }
}

export default NavBar

这些菜单项看起来都一样:

import React, { Component } from 'react';
import { Layout, Menu } from 'antd';
const { Header, Content, Footer, Sider } = Layout;


class Utilities extends Component {

    render() {
        return (
            <div>
                <h1>Utilities!!!</h1>
            </div>
        );
    }
}

export default Utilities;

App.css:

@import '~antd/dist/antd.dark.css';

.App {
  text-align: left;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <React.StrictMode>
        <div>
            <App />
        </div>
    </React.StrictMode>,

    document.getElementById('root')
)
    ;

serviceWorker.unregister();

.webpack.config.js(在my-project/中，在src/外部):

// define child rescript
module.exports = config => {
    config.target = 'electron-renderer';
    return config;
}

.rescriptsrc.js(在my-project/中，在src/外部):

module.exports = [require.resolve('./.webpack.config.js')]

Answer 1

我的第一个猜测是您使用的是webpack，而antd由于配置错误而不会被 bundle 。

您可以使用openDevTools进行调试并检查错误消息。

mainWindow.webContents.openDevTools();

您是否在使用webpack，如果您要发布，请发布配置文件。