Vue使用electron转换项目成桌面应用方法介绍

 更新时间:2022年11月03日 15:36:18   作者:欢莱  
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

1、将已有 Vue 项目打包。

2、新建 main.js、package.json 文件

将打包生成的 index.html、js、css、然后再和新建的 main.js、package.json 文件 放至一个目录下。并命令行切换至这个目录。

新建的 main.js 如下:

const { app, BrowserWindow } = require("electron"); // 引入electron
let win;
let windowConfig = {
  width: 800,
  height: 600,
}; // 窗口的大小
function createWindow() {
  win = new BrowserWindow(windowConfig); // 创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`); // 加载打包生成的index.html
  win.webContents.openDevTools(); // 开启调试工具
  win.on("close", () => {
    //回收 BrowserWindow 对象
    win = null;
  });
  win.on("resize", () => {
    win.reload();
  });
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
  app.quit();
});
app.on("activate", () => {
  if (win == null) {
    createWindow();
  }
});

新建的 package.json 如下:

{
    "name": "demo",
    "productName": "项目名称",
    "author": "作者",
    "version": "1.0.4",
    "main": "main.js",
    "description": "项目描述",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.4",
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64"
                    ]
                }
            ]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        },
        "extraResources": [
            {
                "from": "./static/xxxx/",
                "to": "app-server",
                "filter": [
                    "**/*"
                ]
            }
        ]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0",
        "electron-updater": "^2.22.1"
    },
    "devDependencies": {
        "electron-forge": "^5.2.4"
    }
}

3、安装包:

yarn install

(报错不用管,能 electron . 运行成功且效果正常就行)

4、运行:

electron .

5、注意事项:

  • vue 项目 路由用 hash 模式。
  • vue 项目 的 vue.config.js 要配置 publicPath: './'

(因为若不配置,则 electron 文件路径不对)

  module.exports = {
  	 lintOnSave: false,
  	 publicPath: './',
		css: ....
		....
   }

index.html 中文件路径如以下正确显示:

<link rel="icon" href="favicon.ico" rel="external nofollow" >
<title>efficiency-helper</title>
<link href="css/chunk-11991773.33db9af5.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-17ca335a.ad6ca46b.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-3dde8fae.019eaf8d.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-4c9aec9b.410cb728.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-f52405ee.f4abe7d9.css" rel="external nofollow"  rel="prefetch">

若不配置 publicPath: './' 则:href=“/css/chunk-17ca335a.ad6ca46b.css” 路径错误。导致应用出现白屏。

到此这篇关于Vue使用electron转换项目成桌面应用方法介绍的文章就介绍到这了,更多相关Vue electron内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于vue中的scoped坑点解说

    基于vue中的scoped坑点解说

    这篇文章主要介绍了基于vue中的scoped坑点解说,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue+iview如何实现拼音、首字母、汉字模糊搜索

    vue+iview如何实现拼音、首字母、汉字模糊搜索

    这篇文章主要介绍了vue+iview如何实现拼音、首字母、汉字模糊搜索,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • configureWebpack、chainWebpack配置vue.config.js方式

    configureWebpack、chainWebpack配置vue.config.js方式

    这篇文章主要介绍了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 在vue中使用iframe解决视频资源的防盗链

    在vue中使用iframe解决视频资源的防盗链

    我们的vue2.0项目当中,存储了许多图片和视频资源,所以我们需要增加防盗链设置,但是这样一来,当我们将其他网站上的视频资源,想入到我们的环境当中的时候,会报错,所以本文给大家介绍了在vue中使用iframe解决视频资源的防盗链,需要的朋友可以参考下
    2023-12-12
  • elementui 日期选择器el-date-picker如何给指定日期添加圆点标注

    elementui 日期选择器el-date-picker如何给指定日期添加圆点标注

    这篇文章主要介绍了elementui 日期选择器el-date-picker如何给指定日期添加圆点标注,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

    vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve

    这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue3 diff算法之双端diff算法详解

    Vue3 diff算法之双端diff算法详解

    双端Diff在可以解决更多简单Diff算法处理不了的场景,且比简单Diff算法性能更好。本文将通过示例为大家详细讲讲双端diff算法的实现与使用,需要的可以参考一下
    2022-09-09
  • vue-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。本文介绍了vue-cli4.5.x快速搭建项目,感兴趣的可以了解一下
    2021-05-05
  • vue cli3适配所有端方案的实现

    vue cli3适配所有端方案的实现

    这篇文章主要介绍了vue cli3适配所有端方案的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue使用Element-UI生成并展示表头序号的方法

    Vue使用Element-UI生成并展示表头序号的方法

    序号算是在展示数据的时候,一种很普遍的属性了,我们可以自己写生成序号的规则,也可以借助第三方,这篇文章主要介绍了Vue使用Element-UI生成并展示表头序号的方法,需要的朋友可以参考下
    2023-01-01

最新评论