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

vlambda
2021-03-11

使用 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Web site created using create-snowpack-app" />
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <title>Snowpack App</title>
  </head>
  <body>
    <div id="app"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="dist/index.js"></script>
  </body>
</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",

 <img src="logo.svg" class="App-logo" alt="logo" />

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

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

vlambda博客
学习文章列表