vue+electron让B端转换成C端,创建桌面程序

使用elecron-builder打包生成桌面程序https://mp.csdn.net/mp_blog/creation/editor?not_checkout=1

描述：

原本项目做的B端，现在换成C端，直接vue+electron把B端项目转换成C端，这是根据官网的教程来打包创建桌面程序，要先下载node和git哦。

好了，开始跟着教程一步步的创建属于你的第一个桌面程序吧

一、运行electron

1、安装electron、热更新

npm install --save-dev electron

npm install nodemon -D

2、创建electron.js

// 生成electron桌面程序
// 解构使用
const { app, BrowserWindow } = require("electron")
//获取地址
const path = require('node:path')
  // 创建一个BrowserWindow
const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
    })
    // 打开内部页面，随意创建一个文件，进行拼接地址
     win.loadFile(path.join(__dirname, "./a.html"))
  // 打开F12调式窗口
    win.webContents.openDevTools()
}
//运行createWindow方法
app.whenReady().then(() => {
    createWindow()
})

3、在package.json修改配置

{
  "name": "vue3_cli_default",
  "version": "0.0.0",
  "description": "Hello World!",
  "main": "yourself.js",
  "author": "Jane Doe",
  "scripts": {
    "dev": " nodemon --exec electron .",
  "start": "vite"
    "build": "vite build",
    "serve": "vite preview"
  }
}

4、安全策略 导致报错

走完上面几步，尝试运行npm run dev，结果打开了，但是报错了

这是因为安全策略导致的。把webSecurity设置成false就好了，就不会报错了

    const win = new BrowserWindow({
        width: 1000,
        height: 800,
        //渲染层级使用require（require是node使用）
        webPreferences: {
            // 开始使用node
            nodeIntegration: true,
            // 不开启上下隔离（如果想使用require就要这个关闭）
            contextIsolation: false,
            // 关闭web安全策略，允许加载本地资源
            webSecurity: false,
        }
    })

 5、成功打开electron

运行之后,出现了！！！

二、vue+electron 运行项目

现在我们开始把vue项目和electron结合生成吧。

首先我们先运行起来本地的项目：npm start ,先运行本地的项目

接着在electron.js改变的就是不打开内部页面了，而是打开本地链接。

  // 打开链接
    win.loadURL("http://localhost:3000")

然后在打开一个终端，运行npm run dev ,查看是否成功运行了

成功的运行了，但是每次运行都要执行两次命令，感觉好麻烦啊，能不能使用一个命令就可以成功运行起来呢？那就使用第三种方法。

使用concurrently 启动我们的electron

npm install  concurrently

接着package.json 中修改配置

  "scripts": {
    "dev": "concurrently vite \"nodemon  --exec electron .\"",
    "build": "vite build",
    "serve": "vite preview",
  },

那我们尝试把其中一个终端关闭，重新运行npm run dev,是可以成功的展示的。

三、打包

1、安装Electron Forge 的 CLI 工具包

npm install --save-dev @electron-forge/cli

2、使用现成的转化脚本将项目导入至 Electron Forge。

npx electron-forge import

但是我使用命令后发现报错了，这是由于没有安装electron-squirrel-startup导致的。

3、安装electron-squirrel-startup

安装后，我们再次运行npx electron-forge import尝试一下，还是不行，我尝试用pnpm也不行，那就直接删除node_modules包，运行npm install ，再次尝试还是不行，那就放弃吧。

如果运行成功了直接就进入下一步。

如果没有自动生成的，现在改成手动添加吧。

4、手动添加依赖

npm install --save-dev @electron-forge/maker-squirrel 
npm install --save-dev @electron-forge/maker-deb 
npm install --save-dev @electron-forge/maker-rpm
npm install --save-dev @electron-forge/maker-zip
npm install --save-dev @electron-forge/maker-dmg

5、手动添加forge.config.js

const { FusesPlugin } = require('@electron-forge/plugin-fuses')
const { FuseV1Options, FuseVersion } = require('@electron/fuses')

module.exports = {
    packagerConfig: {
        asar: true,
    },
    rebuildConfig: {},
    makers: [
        {
            name: '@electron-forge/maker-squirrel',
            config: {
                certificateFile: './cert.pfx',
                certificatePassword: process.env.CERTIFICATE_PASSWORD
            },
        },
        {
            name: '@electron-forge/maker-zip',
            platforms: ['darwin'],
        },
        {
            name: '@electron-forge/maker-deb',
            config: {},
        },
        {
            name: '@electron-forge/maker-rpm',
            config: {},
        },
    ],
    plugins: [
        {
            name: '@electron-forge/plugin-auto-unpack-natives',
            config: {},
        },
        // Fuses are used to enable/disable various Electron functionality
        // at package time, before code signing the application
        new FusesPlugin({
            version: FuseVersion.V1,
            [FuseV1Options.RunAsNode]: false,
            [FuseV1Options.EnableCookieEncryption]: true,
            [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
            [FuseV1Options.EnableNodeCliInspectArguments]: false,
            [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
            [FuseV1Options.OnlyLoadAppFromAsar]: true,
        }),
    ],
}

直接运行 npm run make，等待出现out文件后就算是成功了，但是目前是本地的项目，还有一点小小的bug，后续再改。

打开out文件找到定义名字的文件夹，进入到文件夹内 

 找到定义名字的exe双击，就可以看到啦！