从零到制作一个简单的Electron vue应用并用Capacitor打包成安卓app

本文中出现的所有命令是在powershell中输入的。

第一步，在系统左下方的搜索栏中输入powershell并打开。

输入

cd D:\存放代码项目文件夹的路径复制

如我存放在D:\coding就输入cd D:\coding，输入后powershell操作的位置就从红色框变成了绿色框内的路径

第二步，安装一堆东西

安装Node.js：从Node.js的官方网站下载并安装最新版本的Node.js。安装过程中会自动安装npm。安装完成后，可以通过在命令行中分别输入node -v和npm -v来验证Node.js和npm是否成功安装以及检查它们的版本号。

node -v
npm -v复制

• 接下来设置环境变量，在“我的电脑”上按右键，依次点击“属性”-“高级系统设置”-“高级”-“环境变量”
• 进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【C:\Program Files\nodejs\node_globall\node_modules】（以实际安装路径为准），将【用户变量】下的【Path】修改为【C:\Program Files\nodejs\node_global】（以实际安装路径为准）

配置npm镜像源：由于npm的官方源位于国外，下载速度可能会受到网络影响。为了提高下载速度，建议配置npm使用国内的镜像源，如在powershell输入npm config set registry https://registry.npm.taobao.org命令即设置成了淘宝的npm镜像。

全局安装Vue CLI：在powershell输入npm install -g @vue/cli命令并回车来全局安装Vue CLI。

第三步 创建项目文件夹

在powershell输入vue create 项目名称，选择默认配置或根据你的需求进行自定义配置。如下例中我的app项目名字是love-app，你可以改成其他你想起的名字

vue create love-app复制

 如果此时弹出报错‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。 

表示 vue-cli-service 命令在你的系统上未被识别。这通常是因为 Vue CLI 没有被正确安装或其路径没有被加入到系统的环境变量中。

进入项目目录：

cd love-app复制

安装 Electron：

npm install --save-dev electron复制

安装 Electron Builder 以便于打包应用：

npm install --save-dev electron-builder复制

配置 Electron
在项目的根目录下，创建 electron-main.js 文件作为 Electron 主进程文件：

const { app, BrowserWindow } = require('electron')
const path = require('path')
 
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    }
  })
 
  win.loadURL('http://localhost:8080')
}
 
app.on('ready', createWindow)
 
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})复制

在项目根目录下创建 preload.js 文件：

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
 
  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})复制

在 package.json 文件中添加以下配置：

{
  "name": "love-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:serve": "vue-cli-service serve & electron .",
    "electron:build": "vue-cli-service build && electron-builder"
  },
  "main": "electron-main.js",
  "build": {
    "productName": "LoveApp",
    "files": [
      "dist/**/*",
      "electron-main.js",
      "preload.js"
    ],
    "extraMetadata": {
      "main": "electron-main.js"
    }
  },
  "devDependencies": {
    "electron": "^24.1.0",
    "electron-builder": "^22.14.13"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  }
}复制

创建 Vue 组件
在 src/components 目录下创建一个新的 Vue 组件 LoveButton.vue：

<template>
  <div class="container">
    <el-button @click="showLove">点击我</el-button>
  </div>
</template>
 
<script>
import { ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
 
export default {
  components: {
    ElButton
  },
  methods: {
    showLove() {
      this.$message({
        message: '我爱你',
        type: 'success',
        duration: 2000
      });
    }
  }
}
</script>
 
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>复制

在 src/App.vue 中引入并使用该组件：

<template>
  <div id="app">
    <LoveButton/>
  </div>
</template>
 
<script>
import LoveButton from './components/LoveButton.vue'
 
export default {
  name: 'App',
  components: {
    LoveButton
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>复制

安装项目依赖：

在项目文件夹下运行以下命令：

npm install复制

运行 npm install 后，所有列在 package.json 文件中的依赖项将被安装到项目的 node_modules 文件夹中。这一步是必不可少的，因为项目依赖项需要在本地安装以供项目使用。

启动一个本地开发服务器，并启动 Electron：

npm run electron:serve复制

 注释：在我的项目的 package.json 文件中，这个命令是这样定义的：

"scripts": {
  "electron:serve": "vue-cli-service serve & electron ."
}复制

1. 启动 Vue 开发服务器：

   vue-cli-service serve 启动一个本地开发服务器，通常在 http://localhost:8080 上运行。它会监视你的 Vue.js 项目的文件变动，并在文件变动时自动重新加载浏览器页面。

2. 启动 Electron：

   electron . 启动 Electron，并将其指向你的项目的根目录。Electron 会加载 http://localhost:8080 上运行的 Vue.js 应用。
3. 组合在一起，这意味着你可以同时运行 Vue.js 应用和 Electron 应用，并实时查看和测试在开发过程中做的更改。

构建 Vue 应用，并打包 Electron 应用：（报错解决方法见后文）

npm run electron:build复制

注释：在我的项目的 package.json 文件中，这个命令是这样定义的：

"scripts": { 
  "electron:build": "vue-cli-service build && electron-builder"
}复制

1. 构建 Vue 应用：

   vue-cli-service build 会将你的 Vue.js 应用编译并打包成生产环境的静态文件。默认情况下，这些文件会放在 构建后生成的dist 目录下。

2. 打包 Electron 应用：

   electron-builder 会根据你的 electron-main.js 和 package.json 中的配置，将你的应用打包成适用于不同平台（Windows、macOS、Linux）的可安装文件。

electron-builder 使用 build 选项中的配置信息（如产品名称、文件路径等）来创建最终的安装包。

这将创建一个包含按钮的 Electron 应用，点击按钮后会弹出 "我爱你" 的消息提示。

如果运行后报错，注意到红框内的内容Error: error:0308010C:digital envelope routines::unsupported

这一报错是因为在 Node.js 17 及更高版本中，默认使用 OpenSSL 3.0。而某些依赖 OpenSSL 的模块可能尚未完全兼容 OpenSSL 3.0。为了解决这些兼容性问题，你可以使用 --openssl-legacy-provider 选项，这会告诉 Node.js 使用 OpenSSL 的旧版提供程序（即 OpenSSL 1.1）。

在 PowerShell 中运行以下命令：

$env:NODE_OPTIONS="--openssl-legacy-provider"复制

这会在当前 PowerShell 会话中设置 NODE_OPTIONS 环境变量。此设置在关闭 PowerShell 会话后会丢失。

重新执行npm run electron:build 完成页面打包。

Electron 是一个用于构建跨平台桌面应用程序的开源框架，它使用 HTML、CSS 和 JavaScript 来构建用户界面，同时利用 Node.js 来处理底层操作系统的功能。因此，该教程创建的应用会在桌面浏览器上运行。

做好web之后因为不涉及native相关，可以将现有文件用Capacitor打包成安卓app，以下是详细步骤

步骤 1：安装 Capacitor

首先，确保已经安装了 Node.js 和 npm。然后，使用 npm 安装 Capacitor CLI：

npm install @capacitor/cli @capacitor/core复制

步骤 2：初始化 Capacitor 项目

在你的项目根目录下执行以下命令，初始化 Capacitor 项目：

npx cap init复制

如果报错npm error could not determine executable to run，在一个新的空文件夹路径下，如D:\coding\my-app，使用下面这条初始化命令（影响步骤四）

npm init @capacitor/app复制

• 使用场景不同：
• 如果你已经有了一个 Web 项目，并希望将其转化为 Capacitor 项目，请使用 npx cap init。
• 如果你想从头开始创建一个新的 Capacitor 项目，请使用 npm init @capacitor/app。

• 输出内容不同：

• npx cap init：生成 capacitor.config.json 文件，并设置基本的 Capacitor 配置。

• npm init @capacitor/app：创建一个完整的新项目，包括基本的 Web 应用模板和 Capacitor 配置。

这将引导你完成 Capacitor 项目的初始化，包括选择应用的名称、包名等信息。

其中包名的命名方式是com.个人或公司名称.应用名称

如com.zhangsan.wechat

步骤 3：添加 Android 平台

运行以下命令，为你的 Capacitor 项目添加 Android 平台：

npm install @capacitor/android
npx cap add android 复制

步骤 4：复制 Web 应用文件（可选）

在步骤2中如果使用的是npm init @capacitor/app命令，需要将应用构建得到的 dist 文件夹复制到新的根目录D:\coding\my-app中

步骤 5：构建 Android 应用

在 Capacitor 项目的根目录下执行以下命令，构建 Android 应用：

npx cap sync android 复制

这将会同步你的 Web 应用文件到 Android 项目中。

步骤 6：打包 APK

最后，使用 Android Studio 或者 Gradle 来构建并打包 APK 文件。将手机连接上电脑，手机端允许USB调试。在电脑端powershell中输入

npx cap open android 复制

这将会打开 Android Studio，你可以使用它来构建、调试和打包你的安卓应用。

完成以上步骤后，你将获得一个安装包 (APK)，你可以在 Android 设备上安装和运行它。