Electron Forge + Vite + Vue3 + Ts 搭建 Electron 项目到应用打包

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

腊肉清蒸

3868人浏览 · 2024-05-08 11:42:27

腊肉清蒸 · 2024-05-08 11:42:27 发布

参考资料

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

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>

到 src 目录下创建 App.vue

<template>
    <h1>💖 Hello World!</h1>
    <p>经典的 Vue 程序</p>
    <button @click="count++">{{ count }} ++</button>
</template>

<script setup>
console.log('👋 This message is being logged by "App.vue", included via Vite');
import { ref } from 'vue';
const count = ref(0);
</script>

修改 src 目录下的 renderer.ts

import { createApp } from 'vue';
import App from './App.vue';
 
createApp(App).mount('#app');

修改根目录下的 vite.renderer.config.ts ~~，小火鸡又是你~~ 。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

在这里插入图片描述

Electron 启动！！！

npm start

4、如果说要装 Element-Plus 以及它的按需引入，一样的是在 `vite.renderer.config.ts` 这个小伙鸡那里整。

GitHub 加速计划 / vu / vue

108

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：3 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐