使用带有模板和电子的离子路由器时的白页答案

【问题标题】：White page when using ion-router with stencil and electron使用带有模板和电子的离子路由器时的白页
【发布时间】：2021-10-12 06:12:52
【问题描述】：

我有默认的模板“ionic-pwa”应用程序，我试图在电子中运行，但无法使其正常工作（或根本无法工作）。

使用ion-router 时，ion-nav 从不加载任何内容，因此我的页面保持白色。

当我将任何 div 添加到我的渲染中并显示一些文本时，我认为电子加载正确（因为控制台中没有错误 - 但谁知道）。

app-root.tsx

import { Component, h } from '@stencil/core';


@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true
})
export class AppRoot {

  routeWillChange($event) {
    console.warn($event);
  }

  render() {
    return [
      // <div>test</div> <-- this shows up when uncommented
      <ion-app>
        <ion-router useHash={false} onIonRouteWillChange={$event => this.routeWillChange($event)} onIonRouteDidChange={$event => this.routeWillChange($event)}>
          <ion-route url='/' component='app-home'  />
          <ion-route-redirect from='*' to='/' />
          <ion-nav />
        </ion-router>
      </ion-app>
    ];
  }
}

如何解决这个问题？

【问题讨论】：

标签： ionic-framework electron stenciljs

【解决方案1】：

（这可能不完全正确，但为了理解起见：）对于遇到此问题的任何人，根据https://www.npmjs.com/package/electron-serve，此问题存在，因为路由器通过https://developer.mozilla.org/en-US/docs/Web/API/History_API 推送路由状态，这将不起作用使用电子，取决于推动的状态。

electron-serve 拦截了这个并通过“加载回”到主模块来解决这个问题。

所以我所做的只是安装 electron-serve 并稍微修改我的主模块。

const serve   = require('electron-serve');
const loadURL = serve({
  directory: path.join(__dirname, 'www')
});

const { BrowserWindow} = require('electron');

let win;

function createWindow () {
  win = new BrowserWindow({
    width: 800,
    height: 600
  });

  loadURL(win);
}

// ...

【讨论】：