electron安装代理教程

原创 已于 2022-03-05 22:40:23 修改 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#electron

于 2022-03-05 15:20:39 首次发布
本文主要介绍了如何解决使用cnpm时遇到的权限问题，通过设置执行策略为RemoteSigned，调整权限并检查状态来修复。此外，还提供了解决VSCode终端中npm命令无响应的方法，即通过修改环境变量来确保正常运行。

https://zhuanlan.zhihu.com/p/260122142

问题1：

问题内容：cnpm : 无法加载文件 C:\Users\TLGD\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + cnpm install -gelectron + ~~~~ + Cat
问题描述：
cnpm 识别不到
问题解决方案：
输入set-ExecutionPolicy RemoteSigned
然后更改权限为A
最后通过 get-ExecutionPolicy 查看当前的状态

问题2：vscode 终端无法响应npm
解决方案，增加环境变量 https://www.jianshu.com/p/55cbd72661fc

electron使用带身份认证的代理访问webview，支持socks5、http代理
QAZ600888的博客
04-21 1307
electron本身的session不支持代理认证，我们可以中间转接一层，先开启一个支持认证的socks5客户端将数据从socks5代理服务端里面拿过来，再在本地起一个http代理服务端，我们将这个本地http代理服务设置到electron的session里面去，这样数据就能通过socks5客户端 --> http本地服务端 --> electron session。如果内网网页是http的，可以通过openssl生成自签名证书，通过nginx反向代理设置证书地址，开放443端口支持https。
Electron 安装以及搭建一个工程
咸鱼滚滚
09-28 1929
Electron 应用程序遵循与其他 Node.js 项目相同的结构。 首先创建一个文件夹my-electron-app并在vscode 编译器中打开文件夹。
electron-vue配置接口代理、引入自定义vh和vw适配scss以及解决element-ui的el-table组件数据渲染失败问题
qq_41497443的博客
11-17 2401
electron-vue配置接口代理、引入自定义vh和vw适配scss以及解决element-ui的el-table组件数据渲染失败问题 在使用electron-vue进行桌面应用开发时，如何进行接口代理配置和引入做适配的自定义的scss，以及如何解决el-table组件数据渲染失败的问题，这里简单记录一下。 1、进行接口代理配置，在dev-runner.js文件下找到const server = new WebpackDevServer，在options里添加接口代理proxy： const server
electron-vue在开发环境中跨域请求代理配置(亲测有效！！！)
DLGDark的博客
10-16 6114
文件位置：项目 .electron-vue——dev-runner.js，添加proxy即可，target换成自己项目的请求地址即可。直接上代码： const server = new WebpackDevServer( compiler, { contentBase: path.join(__dirname, '../'), quiet: true, + proxy: { + // 配置整个项目请求代理，不用区分
electron安装设置代理的坑
热门推荐
PENGH56的专栏
06-21 1万+
最近尝试安装electron，安装了很久一直报错： 尝试了很多方法，最后发现是.nmprc的配置有问题，以下是我电脑可正常安装的.npmrc的配置： registry=https://registry.npm.taobao.org sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ phantomjs_cdnurl=http...
electron环境安装
weixin_50645221的博客
07-23 554
本文主要介绍在有公司代理的情况下，electron的安装： 安装前的准备工作 关闭所有代理软件，在系统的代理设置中，设置好公司的代理 执行命令设置http代理，如果公司有https代理的话可以设置，没有的话不要设置，因为http和https协议不同，会干扰npm config set proxy http://server:port，如果代理有用户密码，可以npm config set proxy http://username:password@server:port 这里是重点，公司如果不支持http
Electron + Vue 实现一个代理客户端
weixin_34343689的博客
04-07 1930
开源项目地址：戳我 原理 作为一个合格的前端工程师，你一定用过Fiddler或Charles之类的抓包工具。但是在Mac上做开发时，相关的抓包工具很多是收费的。当你费劲心思下载到了破解版，却还是难以忍受其丑陋的win风格界面和令人悲伤的闪退问题。有没有想过自己来实现一个代理客户端呢？其实这个真的可以有。 中间人 一个http代理服务器的原...
Mac安装搭建electron教程
hgfygfc的博客
11-14 1326
Mac安装搭建electron教程
archlinux 使用 electron-ssr 代理 socks5
以梦为马|越骑越傻
02-06 3568
archlinux 使用 electron-ssr 代理 socks5
Electron入门教程3 ——进程通信
weixin_50216991的博客
04-18 5455
进程间通信(IPC)是在Electron中构建功能丰富的桌面应用程序的关键部分。因为主进程和渲染进程在Electron的进程模型中有不同的职责，IPC是执行许多常见任务的唯一方式，比如从UI调用本地API或从本地菜单触发web内容的更改。
一个网络代理客户端依赖于Anyproxy.构建在Electron和Vue之上.
08-10
一个网络代理客户端, 依赖于 Anyproxy. 构建在 Electron 和 Vue 之上.
Node.js-electronelectron-vue代理工具抓包工具网络功能工具anyproxy
08-10
electron electron-vue 代理工具 抓包工具 网络功能工具 anyproxy
Node.js-proxy基于electron开发的内网穿透工具
08-10
基于electron开发的内网穿透工具，支持多系统，支持任意本地端口.
扩展开发：创建 Electron 插件
最新发布
zimin的专栏
09-16 991
在 Electron 框架的扩展开发领域，创建 Electron 插件是提升应用模块化和可复用性的关键技术，特别是构建可复用插件模块，结合 Node.js 扩展 Electron 功能，更是 Electron 项目从基础应用到生态系统的转型之钥。它不仅仅是代码封装的过程，更是开发者在处理自定义功能、社区共享和性能优化时的战略实践。想象一下，一个高度可扩展的 Electron 应用如一个模块化的代码编辑器或企业级工具箱，它需要在核心基础上加载插件，实现自定义协议处理、主题切换或第三方集成。如果没有插件机制，这
electron使用代理_我们如何用Electron打造Rodeo
cumei1658的博客
07-13 2218
electron使用代理Last week we announced the release of Rodeo v1.0. The big deal was that we’d taken Rodeo from a command line, python app built using Flask, to a more legitimate looking desktop app. 上周，我们...
Electron开发 - 如何在主进程Main中让node-fetch使用系统代理
王森的博客
07-03 1533
开发过程中，有些时候，要访问公司内网服务器，提供的一些服务啥的，但是问题的关键是用户使用的网络各不相同，所以就要动态地使用系统代理来访问，但是主进程默认为控制台级别的请求，不走系统网络，除非你代码中指定走系统代理，这个就有了这篇内容
Electron http proxy
cloudspider的专栏
02-14 3201
function setProxy (mode, proxyServer) { mode = mode || store.get('enableProxy'); switch (mode) { case 'custom': { const { host, port, protocol } = store.get('proxy'); log('Custom proxy %s:%s.', host, port); proxyServer = protocol.
基于代理和单例模式的 electron 多窗口管理方案
jclee95的个人博客
12-23 5347
单例模式进行全局状态管理的解决方案有很多。本文介绍一种围绕electron使用单个对象的代理并配套多个相关函数的窗口管理解决方案。
electron 打包把node代理服务打包进去_使用electron构建跨平台桌面应用程序
weixin_39687786的博客
11-30 1614
INTRODUCE先介绍一下ElectronElectron(最初名为Atom Shell[3])是GitHub开发的一个开源框架。它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。Electron...
uni-app安装electron
06-07
<think>嗯，用户的问题是关于在uni-app中安装和使用Electron的教程。首先需要理清楚这两个技术之间的关系。uni-app本身是一个跨平台的前端框架，主要针对移动端和小程序，而Electron是用于开发桌面应用的。用户可能希望将uni-app项目打包成桌面应用，所以需要结合两者。先回顾之前的对话历史，用户提到参考站内引用，但引用内容是关于uni-app学习路径的，与Electron无关。这说明用户当前的需求超出了之前的指引范围。需要确认uni-app官方是否支持Electron集成，或者是否有社区方案。查阅uni-app官方文档，发现官方主要支持H5、小程序、App等平台，并没有直接提及Electron。但uni-app可以打包成H5，而Electron可以嵌入网页，因此可行的方案可能是先将uni-app打包成H5，再用Electron加载。这可能涉及到Electron项目的创建、配置和打包步骤。接下来需要考虑如何组织步骤。首先安装Node.js和Electron是基础，然后创建Electron项目，配置main.js来加载uni-app生成的H5页面。同时，需要指导用户如何在uni-app中构建H5版本，并且解决可能存在的路径问题，比如file://协议的限制可能需要使用本地服务器或调整路径。另外，打包和发布部分需要详细说明，比如如何用electron-builder打包不同平台的安装程序。可能还需要提醒用户注意事项，比如Electron应用的体积较大，以及调试方法。用户可能遇到的问题包括路径配置错误、资源加载失败，或者跨域问题，所以注意事项部分要强调本地服务器或协议的处理。同时，建议用户查看uni-app的H5配置文档，确保打包正确。最后，生成的相关问题需要考虑用户后续可能的需求，比如优化体积、调用系统API，或者处理路由问题，这样可以帮助用户深入使用。需要确保每个步骤清晰，避免技术陷阱，尤其是路径和协议相关的问题，这对刚接触Electron的用户来说容易出错。</think> 将 uni-app 项目与 Electron 集成，主要是将 uni-app 打包成 H5 后嵌入 Electron 桌面应用框架中。以下是具体步骤和核心要点： --- ### **集成步骤** #### **1. 安装前置依赖** ```bash # 全局安装 Electron (需先安装 Node.js) npm install -g electron ``` #### **2. 创建基础 Electron 项目** ```bash mkdir uni-electron && cd uni-electron npm init -y # 初始化 package.json npm install electron --save-dev ``` #### **3. 配置 uni-app 项目** - 修改 `manifest.json`，确保 **H5 路由模式为 `hash`**（避免 Electron 加载路径错误）： ```json "h5": { "router": { "mode": "hash" } } ``` - 打包 H5 资源： ```bash npm run build:h5 # 生成 dist/build/h5 目录 ``` #### **4. 集成到 Electron** 1. 将 uni-app 的 H5 输出目录（如 `dist/build/h5`）复制到 `uni-electron/public` 2. 创建 Electron 主进程文件 `main.js`： ```javascript const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true, contextIsolation: false } }) // 加载本地 H5 资源（开发环境可改用 http://localhost:8080） win.loadFile('public/index.html') } app.whenReady().then(createWindow) ``` 3. 修改 `package.json` 启动脚本： ```json "scripts": { "start": "electron ." } ``` --- ### **启动与调试** ```bash npm start # 启动 Electron 应用 # 调试按 Ctrl+Shift+I 打开开发者工具 ``` --- ### **打包桌面安装程序** 使用 `electron-builder` 生成可执行文件： 1. 安装打包工具： ```bash npm install electron-builder --save-dev ``` 2. 配置 `package.json`： ```json "build": { "appId": "com.example.uniapp", "files": ["**/*", "public/**/*"] // 包含 uni-app 资源 } ``` 3. 生成安装包： ```bash npx electron-builder --win --x64 # Windows 64位 ``` 输出目录：`dist/` --- ### **注意事项** 1. **协议限制** Electron 加载本地文件需用 `file://` 协议，避免跨域问题可配置： ```javascript win.loadURL(`file://${__dirname}/public/index.html`) ``` 2. **路径问题** 静态资源（如图片）在 uni-app 中需使用绝对路径（`/static/logo.png`） 3. **本地接口调试** 开发阶段可在 `main.js` 中配置代理解决跨域： ```javascript const session = win.webContents.session session.webRequest.onBeforeSendHeaders((details, callback) => { details.requestHeaders['Origin'] = 'http://your-api-domain.com' callback({ requestHeaders: details.requestHeaders }) }) ``` --- ### **操作流程图** ```mermaid graph TD A[Uni-app项目] --> B[打包H5资源] B --> C[复制到Electron/public] D[Electron主进程] --> E[加载public/index.html] E --> F[生成桌面应用] ``` --- ### **典型场景示例** **调用 Electron 系统 API（如文件操作）** 在 uni-app 的 Vue 组件中： ```javascript const { ipcRenderer } = require('electron') ipcRenderer.send('open-file-dialog') ``` 在 `main.js` 中响应： ```javascript ipcMain.on('open-file-dialog', () => { dialog.showOpenDialog({ properties: ['openFile'] }) }) ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值