如何使electron打包时使用另外一个路由

2022-08-10 14:31:09 阅读：211 来源： 互联网

标签：index dist settings electron 路由 file 打包

问题描述

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改成""就行了.

标签：index,dist,settings,electron,路由,file,打包
来源： https://www.cnblogs.com/plBlog/p/16572302.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何使electron打包时使用另外一个路由