Vue cli3 cli2 项目 创建electron项目多入口，多模块

最新推荐文章于 2024-08-19 09:40:48 发布
最新推荐文章于 2024-08-19 09:40:48 发布
阅读量2.7k 收藏
点赞数
分类专栏： Vue.js electron 文章标签： vue-cli3 vue-cli2 多窗口 多入口 electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32842925/article/details/99839037
版权
本文介绍了如何在Vue CLI 3/2项目中创建 Electron 多窗口、多入口的配置方法。通过详细步骤展示了如何修改配置，确保在开发和编译过程中避免主窗口和路由问题，实现Web端和Electron端的代码编译。同时，文章强调了在不同环境下路径处理的重要性，提出了解决斜杠问题的方案。
摘要由CSDN通过智能技术生成

情景分析

  • 一个electron项目如果是公司的企业项目，一般包含了开启后台master的功能，这样就会带来一些列的问题：

    • 如果将起master直接放再路由里，在开发的时候，热重载会或者刷新（Ctrl + R）这一类操作会造成master掉线的情况；
    • 当同时存在web环境和electron环境时，路由的切换和准备将是一大麻烦事儿！
    • 可能存在一个需求需要不影响当前路由的同时，开启另一个页面进行一系列操作，然后将结果返回，或者接受主路由（主窗口的消息）进行计算和解析并生成结果；
    • …

  • 此文目的： 记录一个项目架构，同时能编译出web端和electron端代码，并且electron作为pc端能打开副窗口进行渲染。类似需求：启动页，登录页，加载页（大型应用可能需要加载

最低0.47元/天 解锁文章
奔跑的飞牛
关注
专栏目录
Electron理论知识 19 - Electron 多媒体采集模块介绍
liuzhen007的专栏
03-10 913
目录 前言 正文 首先，来看目录结构 其次，看关系类图 最后，看日志记录 1. DVLOG 2. MediaLog 《Electron实战》系列-总览_liuzhen007的专栏-CSDN博客欢迎大家阅读 Data-Mining 的《Electron实战》专栏。这里简单的罗列一下专栏的文章目录，一方面方便大家阅读，另一方面可以快速的查找对应的文章。需要说明的是，本专栏会持续更新，不断增加新的文章，同时，也会动态更新原有文章。https://liuzhen.blog.csdn.net/arti
Electron 使用 Webpack2 打包多入口应用程序
kongxx的专栏
05-17 4550
Electron 使用 Webpack2 打包多入口应用程序接前面一篇文章，前一篇文章中只有一个页面，并且只有一个js文件，所以打包的时候会把那个js打包成一个bundle.js文件。但是假如我们有多个页面，且每个页面需要使用的js文件也不同，那么我们应该怎样打包呢。安装依赖库这里准备做个小的演示程序，首先安装一些这个演示程序需要看的第三方库$ npm install --save-dev elec
Electron31-ViteAdmin桌面端后台|vite5.x+electron31+element-plus管理系统Exe
最新发布
码农ICoding
08-19 1975
electron31-vite5-admin：基于electron31+vue3 setup+pinia2+element-plus+echarts实战开发轻量级后台管理系统。内置4种通用布局模板，支持国际化、动态路由权限，整合了表格、表单、图表、列表、编辑器等业务模块。
Electron+Vue多页面多入口应用，窗口间传输大数据的最优方式sharedWorker
sinat_40408885的博客
05-28 1153
Electron+Vue多页面多入口应用，窗口间传输大数据，避开主进程中转，避开JSON.parse(JSON.stringify())转换的最高效方式sharedWorker
vue-cli2构建多页面：改造原配置文件，实现自动构建多页面入口和模板文件
猿始森林
04-22 2028
一、改造utils.js，添加getModules方法，方法中需要使用到node的glob模块 1、安装glob模块 npm i glob -D 2、创建getModules方法，获取文件名以及对应路径 const glob = require('glob'); // 构建多页面（获取文件名以及对应路径） exports.getModules = function (globPath) { ...
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要...
electron-vuecli:Electron12.0.0 + Vuecli + Javascript + 调用dll + electronUpdater +vue
08-03
vueCli + electron12.0.0 调用C# DLL electron-updater在线更新 项目设置 npm install 为开发编译和热重载 npm run serve 为生产编译和缩小 npm run build Lints 和修复文件 npm run lint 自定义配置 请参阅。 ...
使用electron将vue-cli项目打包成exe的方法
01-21
如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。 首先你可以下载一个demo了解一下。 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install ...
vue2+elementui+electron项目配置
06-06
然后，创建一个`main.js`文件作为Electron的入口，这里你可以设置窗口属性、加载Vue应用等： ```javascript const { app, BrowserWindow } = require('electron'); const path = require('path'); function ...
基于vue-cli搭建多模块且各模块独立打包的项目
10-16
主要介绍了基于vue-cli搭建多模块且各模块独立打包的项目,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
electron-vue通过自定义协议唤起并传参数
qq_37568942的博客
05-06 4127
electron-vue通过自定义协议唤起，并且在协议后面加参数传递到程序中（协议唤起不区分浏览器）。需求为通过链接唤起程序并区分进入不同页面（本文只测试Windows环境）。 一、项目背景 先有Vue项目，后安装electron并通过electron-builder打包，安装完后会自动生成background.js并在package.json中添加入口，简单看下关键配置不做过多解释： 二、注册协议（注册协议和接收参数都在background.js中） 在创建窗口createWindow方法中添
electron生产环境窗口白屏或闪一下消失问题
Chaoggo的博客
07-20 1188
electron生产环境窗口白屏或闪一下消失问题
如何使用Vue开发Electron桌面程序
任磊
04-14 6142
一、Electron介绍 Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目. 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 1. 特点 跨平台 可以打包成Mac、Windows 和 Linux三个平台的应用程序 简化桌面端开发 （1）Electron 基于 Chromium 和 Node.js,可以使用 HTML, CSS 和 JavaScript 构建应用 （2）提供Electron api 和 NodeJS api
vue2使用electron以及打包配置
m0_63701303的博客
01-15 2264
vue2使用electron以及打包配置
Vue中process.env关键字怎么使用，以及前后端不在同一台服务器怎么访问？
Itmei的博客
07-09 5251
可以在命令行输入命令查看环境信息 有以下三种运行模式 我们查看配置信息，当运行Vue CLI命令，开发环境运行，要部署服务器发布生产环境时运行，他们正好对应Vue CLI中的模式和模式，就会把该模式下的NODE_ENV载入其中了 那既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢？ 会有先后顺序 一个环境文件只包含环境变量的“键=值”
webpack-dev-server 配置
暮落的博客
12-27 3488
    1、安装webpack-dev-server cnpm install webpack-dev-server -D 2、package.js同级目录下新建package.config.js文件。代码如下：   module.exports={   entry:'',   output:'',   devServer:{     port:9999,     host:'local...
electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了
qq_32244819的博客
12-07 6525
准备环境： 1、nodejs 1、安装cnpm、yarn npm install -g cnpm --registry=https://registry.npm.taobao.org npm install -g yarn 2、修改yarn的镜像 yarn config set registry https://registry.npm.taobao.org -g 3、设置electron的yarn镜像（要不然安装依赖会出错） 打开C盘下的用户目录（mac就在用户目录下，需要显示隐..
electron 3.0.0实现静默打印：VueCLI3项目示例
在本文中，我们将探讨如何使用Electron与Vue CLI 3结合，实现静默打印小票功能。作者提到由于特定版本限制（推荐Electron 3.0.0），其他版本如4和5可能无法达到预期效果。主要的操作步骤如下： 1. 环境配置：首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奔跑的飞牛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值