Electron Forge + Vite + Vue3 + Ts 搭建 Electron 项目到应用打包_vue3+ts+electron开发一个个模块

作者：在线问答5 | 2024-08-11 16:00:29

踩

vue3+ts+electron开发一个个模块

参考资料

Electron Forge：https://www.electronforge.io/

1、创建基于 Electron Forge 的 Vite+TS 项目

注意事项：并且 Forge 目前只有四个模板分别是 webpack、webpack-typescript、vite、vite-typescript

开始搭建 vite-typescript 项目

npm init electron-app@latest my-app – --template=vite-typescript

> npm init electron-app@latest my-app -- --template=vite-typescript
✔ Locating custom template: "vite-typescript"
✔ Initializing directory
✔ Preparing template
✔ Initializing template
✔ Installing template dependencies
# 进入项目
> cd my-app
# 启动项目
> npm start
1
2
3
4
5
6
7
8
9
10

Electron Forge 启动会比较慢，但这不是什么大问题，看到这个页面就说明你启动成功了

它默认启动了控制台，进入 src/main.ts ，可以把它干掉：
Electron 的主进程(main.ts)、preload.ts、renderer.ts 全部放在src目录下，基本配置项目模板已经搞定了，另外renderer.ts之后将会替代 Vue 的 main.ts ~~(真tm是个天才，我之前写的时候怎么没想到)~~

2、Electron 打包

Vue 先别着急，后面再集成，这玩意儿个头有点大，打起包来老慢了。

打包也是相当简单的： npm run make。

打包好后，文件将会输出在 out 目录中，打包出来后会有两个目录：

一个是 make 目录，里边装了一个 exe、nupkg 和 RELEASES 我的评价是，贼慢。
另外一个是 my-app-win32-x64，里面就是我们比较熟悉的便携式免安装程序了，通过 my-app.exe 启动应用，resources 里装着我们自己的项目编译的内容。
resource/app.asar，app.asar，我们可以通过如下命令将其解包：

解包 asar 文件：asar extract app.asar ./app
如果你没有安装 asar 可以通过 npm install -g asar 安装它

看起来不管在哪里，package.json 与 node_modules 都显得非常重要。
.vite 目录里存放着项目编译好的文件：
Electron 与 Web部分 的打包是分开的，在静态资源上也应该如此，在我看来 Electron 的静态资源不应该放在 src 目录下，在 Web部分 的打包作用下，你 src 下的静态资源 Electron 可能再也找不到某些静态资源了 （它们都被打包合并到一起去了）。当然根目录下的 public 是个例外，这个目录下的静态资源不会出现编译后 “找不到图的情况”。这个目录下的静态资源会出现双份，一份放在 .vite/build 目录中，另外一份放在 .vite/renderer/main_window 中。

3、安装 Vue

添加依赖

npm install vue
npm install --save-dev @vitejs/plugin-vue

修改根目录下的 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
  	<!-- app 挂载节点 -->
    <div id="app"></div>
    <!-- 
    renderer.ts
    还记得我之前说了啥吗？renderer.ts 将会替代 vue 的 main.ts
    -->
    <script type="module" src="/src/renderer.ts"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

到 src 目录下创建 App.vue

<template>
    <h1>声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/965027

推荐阅读

相关标签