问题描述

electron使用react全家桶写的项目,想打开一个另外窗口,如设置界面.我们已经写在另外一个路由下,如/settings路由

在开发环境下我们可以直接使用,如下显示,基本没有问题

mainWindow.loadURL('http://localhost:8888/#/settings')

可是在打包时候,我们打包后生成的静态资源都以file协议被读取,如果直接这样是不行的

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '/dist/index.html/#/settings'),
    protocol: 'file:',
    slashes: true,
  }))

那么怎么办呢,经过查阅nodejs,url模块文档, 我们可以加一个hash属性,如下

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '/dist/index.html'),
    protocol: 'file:',
    slashes: true,
    hash: "settings"
  }))

这样就可以完美解决啦!
注意,在electron下,必须使用react-router-dom下的HashRouter,否则在打包时候的环境下有问题

遇到的坑

使用了异步组件(代码分割)

使用如下进行代码分割

import AsyncComponent from "@app/components/asyncComponent";
...
export class App extends React.Component<any, any> {
    render() {
        return (
          <HashRouter>
            <Switch>
              <Route exact path="/setting" component={AsyncComponent(() => import(/*webpackChunkName:'setting'*/"@app/containers/setting/Index"))}/>
              <Route path="/" component={Home}/>
            </Switch>
          </HashRouter>
        );
    }
}

最后按文章使用这个settings路由的时候,显示错误,查看开发者工具,发现加载的路径有问题.

"file:///Users/tao/Documents/electron/helloEle/dist/.js/settings.chunkc54aae4.js"

其中多了一个,自然而然想到webpack的output中的publicPath设置了这个"."
那么首页为什么是正常的呢,再来看看index.html中生成的路径

<script type=text/javascript src=./js/vendor.chunk59e4497.js?75e513edd0c9ef261c87></script>

取得是相对路径,由electron处理相对路径,这样没毛病.
但是这个settings的js是有webpack给我们加上去的,而且坑爹的把路径拼成了这样(其实也不怪他),那么有办法处理这个问题吗? 那肯定,否则还写什么.只需简单的把publicPath改成""就行了.