使用 snowpack, vue 和 electron 创建桌面应用程序

使用 snowpack, vue 和 electron 创建桌面应用程序

snowpack 3.0 版本已经发布有一段时间了， snowpack 是类似于 webpack 的 js 项目打包，编译工具，但是相对于 webpack， snowpack 开箱即用，对目前市面上比较流行对框架都有预设模版，并且编译打包速度比 webpack 快很多。

因为 snowpack 对很多框架都是开箱即用的，所以像 react， vue ，preact， svelte 只要查看这个文档即可：https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/cli

这里介绍一下如何通过 snowpack 的 vue 项目创建 electron 桌面程序，同理可应用于 snowpack 支持的其他框架。

1. 安装 snowpack， 建立项目

首先需要通过 snowpack 创建一个 Vue 项目， 这个很简单：

npx create-snowpack-app desktopapp --template @snowpack/app-template-vue --use-yarn

创建完成之后进入应用目录，执行 yarn start, 就可以通过浏览器查看项目。

2. 安装 electron

接下来安装 electron， 这个也很简单：

npm i --save-dev electron

3. snowpack 项目适配 electron

我们执行一下

yarn build

就可以看到 vue 项目最终打包的目录， 在 build 文件夹下， 然后需要在项目目录下创建一个 main.js 文件：

const { app, BrowserWindow } = require('electron')function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('build/index.html')}app.whenReady().then(createWindow)app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() }})app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() }})

这里的 win.loadFile 更改为项目的打包目录。然后修改 public/index.html

这里尤其需要注意的是 Content-Security-Policy 和 js css 的加载路径，这里改成相对文件的路径，而不是 url 的相对路径。添加信息:

{ "name": "desktop-app", "version": "0.0.1", "author": "nobody", "description": "a desktop app based electron.", "main": "main.js", "scripts": { "start": "snowpack dev", "build": "snowpack build", "test": "echo \"This template does not include a test runner by default.\" && exit 1" }, "dependencies": { "vue": "3.0.0" }, "devDependencies": { "@snowpack/plugin-dotenv": "^2.0.5", "@snowpack/plugin-vue": "^2.3.0", "electron": "^12.0.0", "snowpack": "^3.0.1" }}

4. 打包和分发应用

使用 Electron Forge 来打包和分发应用程序，添加和导入 Electron Forge ：

npx @electron-forge/cli import

导入完成之后 package.json 会进行更新，我们将里面的 start 脚本修改为：

"start": "snowpack build && electron-forge start",

运行 yarn start 就可以启动我们的程序了，第一次启动貌似 logo 没加载出来，我们去 App.vue 文件将 logo 的路径修改为文件地址的相对路径：

再重新运行即可正常显示。

在 electron 里面包含了 node 的环境，因此在 vue 项目中可以执行 node 的 api， 比如使用 got js 来进行 http 请求，它封装的是 node 的 net 模块，而非前端的 fetch 或者 xhr 。