Electron结合SPA应用打包

最新推荐文章于 2024-03-26 15:23:26 发布

听风念旧人

最新推荐文章于 2024-03-26 15:23:26 发布

阅读量326

点赞数

分类专栏： node js 技术 electron 文章标签： web vue react

本文链接：https://blog.csdn.net/qq_44306441/article/details/119421455

版权

node js 技术同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

electron

2 篇文章 0 订阅

订阅专栏

文章目录

electron可以将html、css、js程序打包为桌面端程序。，比如，之前上线的程序，产品突然想要转换为桌面端程序。这时就需要Electron 这门技术了。这个就是我写这篇文章的主要意图。

常见的SPA应用

常见的SPA应用绝大多数都是vue、react应用。这些应用大多都是利用webpack进行打包，生成dist静态资源(html、css、js)。然后部署到服务器上供用户访问。

Electron加载内容的两种方式

文件(file)
地址(url)

Electron组成

node + Chromium

前端常见的问题

前端常见的问题之一就是跨域了。但是在Electron中就不存在这个限制了，毕竟他是Chromium，而不是浏览器。

静态资源与Electron 结合

请求数据

因为是Electron直接加载本地文件，访问协议就是file协议。所以请求数据需要写好完整的路径（域名、协议、端口）
```
如：http://www.baidu.com/api/xxx
```
配置webpack打包器
```
publicPath: "./",
```
这个必须设置为./目的是为了从当前目录下寻找资源
设置index.html
将打包后的index.html 内添加一个标签base
```
  <head>
    <base href="./">
  </head>
  <body>
```
同样的第二步是同一个意思
最后一步设置package.json文件，添加homepage属性这个是需要在Electron 下设置的，上边都是在vue、react下设置
```
homepage:'./'
```

当然了，你需要在Electron下设置窗口加载文件了

 const win = new BrowserWindow( options )

  win.loadFile( 'dist/index.html' ) 
  // 这里的dist就是vue、react打包后的静态资源

  win.once( 'ready-to-show', () => {
    win.show()
  } )

运行你的命令，就能拥有一个桌面端程序了。

听风念旧人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron结合SPA应用打包

Electron结合SPA应用electron可以将html、css、js程序打包为桌面端程序。但是不够灵活，比如，之前上线的程序，产品突然想要转换为桌面端程序。这时就需要Electron 这门技术了。这个就是我写这篇文章的主要意图。常见的SPA应用常见的SPA应用绝大多数都是vue、react应用。这些应用大多都是利用webpack进行打包，生成dist静态资源(html、css、js)。然后部署到服务器上供用户访问。Electron加载内容的两种方式文件(file)地址(url)E
复制链接

扫一扫