electron-vue爬坑之打包后接口路径file://

最新推荐文章于 2025-05-01 15:04:31 发布
最新推荐文章于 2025-05-01 15:04:31 发布
阅读量6.3k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： 代码分享 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sake_pipi/article/details/109045753

最近解决了一个关于electron-vue打包后接口路径出现file://的问题

历经资料一顿找也没找到

现在解决了以后，我把它发出来提供给那些有需要的人

这个平台不发正文

浏览跳转electron-vue爬坑之打包后接口路径file://

Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包
northcastle的博客
04-23 3204
Electron + Vue3+Electron Forge 打包成桌面程序的全流程步骤，分布打包、手动配置的方式
【Electron-Vue】构建桌面应用（2）-打包生成可window安装包
chenqk_123的专栏
09-11 2890
1.前言 在上篇文章中说到，使用Electron-Vue去构建一个Vue项目，并且可以通过package命令之后，生成了一些列的绿色文件(即执行安装包之后生成的文件)，点击其中的exe文件就可以运行了。 由于安装程序最后会以安装包的形式(即单一的exe文件)交付给客户，然后客户安装exe文件，会得到绿色文件。 下面这种就是安装包 下面这种就是安装之后的绿色文件 安装的同时会生成桌面图标，用户双击后会执行exe程序。 桌面图标 双击执行之后 以上所有的操作就是整个安装包从项目
electron 打包后 __static_electron-vue爬坑之打包后接口路径file://
weixin_28687251的博客
02-03 3178
最近开发electron-vue的时候遇到一个坑于是到网上一顿找但根据每个人的写法或用的框架不一致导致网上的资料不是正确的最终结果是也没找到解决方案就像在平坦的柏油路上奔驰一个小坑会让你措不及防而翻车坑1、在vue-cli创建的electron项目中，dev环境下用axios访问接口跨域问题这个问题好解决在vue.config.js配置中写入如下代码module.exports = {// 第三方...
electron运行本地请求路径是端口号（http://localhost:8080/），打包后请求file://开头的路径
一个努力不被优化的程序员
06-29 1292
2：查看接口请求地址是否存在（不要请求拦截器里面打印buseURL，打印的是最新的但是接口请求的不是）原因：接口请求地址是空值或者是无效的，electron会进行处理。1：查看自己的buseURL初始值。
Electron之如何自定义协议？有啥用？
最新发布
深坑妙脆角的博客
05-01 987
本文详细讲解了electron中如何自定义协议，以及它有什么用，并给出实际运用场景
electron+Vue 文件打包dist路径遇到file///错误解决方式（四）
SquirrelPineal的博客
07-20 2942
在开发electron打包vue的时候，会生成一个dist文件,然后在使用过程会发现问题。
vue打包build后资源文件变file:///
wasd986523的博客
02-19 1819
在项目根目录下 建立vue.config.js module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/.
electron ajax路径,electron 打包用file协议的ajax请求路径问题
weixin_29250573的博客
08-05 1142
使用electron, 将项目打包成离线应用。使用file协议，在本地读取静态资源。但是ajax请求如果用相对路径，打包之后，会直接找到根目录。// main.jsconst winURL = process.env.NODE_ENV === 'development'? `http://localhost:8080`: `file://${__dirname}/index.html`mainWi...
electron-vue 打包所需文件
03-23
使用 Vue 的 `file-loader` 或 `copy-webpack-plugin` 可以确保资源被正确打包。 4. **缓存问题**：如果打包出现问题，`Cache` 文件夹中的内容可能已经过时或损坏。清空或替换此目录的文件可能解决打包失败的问题。...
前端——electron-vue打包遇到的深坑，希望能帮到大家
Fidgety的博客
05-11 763
electron-vue项目打包（electron:build）1. 安装electron提供的打包插件2.配置打包信息（个人是在vue.config中配置的）执行打包命令 个人是使用cli脚手架搭建的electron 框架 1. 安装electron提供的打包插件 在当前项目根目录下安装打包插件 npm install electron-builder 或全局安装 npm install electron-builder -g 2.配置打包信息（个人是在vue.config中配置的） module.ex
vue配置electron，使用electron-builder进行打包【完整步骤】
热门推荐
CMDN123456的博客
08-05 1万+
vue配置electron，使用electron-builder进行打包【完整步骤】
前端学习之路Electron——File
HarryHY的博客
10-08 366
<div style="background-color: red; width: 100%;height: 300px;" id="bb1"> <button> file </button> <div> 拖拽文件 </div> </div> const fs = require('fs')； ...
vue3项目使用electron-builder打包成程序，打包后无法运行
weixin_47370657的博客
09-15 2835
electron-builder打包问题
electron img无法加载 带file:///的绝对路径图片问题
weixin_42453381的博客
07-09 3013
原因electron 4.x开始后的安全策略，不识别file:///开始的url 解决方案：main.js中，加入webSecurity: false，并且自定义file:///协议的解析 import { app, BrowserWindow, ipcMain, protocol } from 'electron' function createWindow () { /** * Initial window options */ mainWindow = new BrowserWin
【ElectronVue】在Vue中调用Electron接口
无限循环
11-19 3517
研究基于Electron + Vue混合桌面应用开发自定义窗口时 需要在UI界面自定义窗口的最小化、最大化、关闭基本操作功能时，遇到的问题及即将方式 1.实验环境 // package.json // 关键依赖：electron 、electron-builder { // ... "dependencies": { // ... "vue": "^2.6.11", // ... }, "devDependencies": { // ... "@vu.
URL文件地址转File对象
峰晨的博客
07-05 2989
private File getFile(String url) throws Exception { //对本地文件命名 String fileName = url.substring(url.lastIndexOf("."),url.length()); File file = null; URL urlfile; InputStream inStream = null; OutputStream os =
electron-builder打包白屏，报错：Not allowed to load local resource: file:///index.html解决方法
舜岳的博客
03-04 7620
报错如下： （还有的是控制台弹窗报错） 先看看项目目录结构： |--dist |--|--index.html //打包好的主入口文件 |--|--main.bundle.js //打包好的main.js文件 |--|--... |--src |--|--main //main.js文件在里面 |--|--|--main.js //electron主入口文件 |--|--renderer //...
文件上传 - 前端页面上传 file 文件到服务器
不想懂得Zenith
10-25 5577
我们还是基于上一篇文章进行编写 : https://blog.youkuaiyun.com/weixin_42629433/article/details/83378652 一. 数据库中创建表 -- 创建部门表 CREATE TABLE dept( id INT(20) NOT NULL AUTO_INCREMENT, deptName VARCHAR(50), createDate VARCHAR...
ruoyi-vue打包eletron后退出登录白屏Request URL: file:///index Referrer Policy: strict-origin-when-cross-origin
04-23
### 问题分析 在 Ruoyi-Vue 项目中，使用 Electron 进行打包后，退出登录时可能会遇到白屏的问题。这通常是由以下几个原因引起的： 1. **路由模式问题**：Electron 中默认使用的 `history` 路由模式可能导致页面刷新或跳转失败[^2]。 2. **Cookie 替换为 LocalStorage 的不完全性**：如果未全局替换 Cookie 使用场景，则可能引发数据丢失或逻辑错误[^3]。 3. **路径解析差异**：Node.js 和 Electron 对路径的处理方式可能存在兼容性问题[^3]。 4. **入口文件配置错误**：打包后的应用找不到正确的入口文件也可能导致加载失败[^4]。 以下是针对该问题的具体解决方案。 --- ### 解决方案 #### 1. 修改路由模式 将 Vue Router 的模式从 `history` 改为 `hash` 模式，以避免由于路径变化而导致的页面无法正常渲染的情况。具体修改如下： ```javascript // router/index.js export default new Router({ mode: 'hash', // 将 history 改为 hash routes: [...] }); ``` 此更改可有效防止因路径问题导致的白屏现象[^2]。 #### 2. 替换 Cookie 为 LocalStorage 为了确保数据存储的一致性和跨平台兼容性，在整个项目中全面替换 Cookie 的使用为 LocalStorage。主要涉及以下几处改动: - 删除 `package.json` 中与 Cookie 相关的依赖项： ```json "dependencies": { ... // 删除 js-cookie 及其版本号 } ``` - 全局搜索并替换以下方法调用： - `Cookies.get` → `localStorage.getItem` - `Cookies.set` → `localStorage.setItem` - `Cookies.remove` → `localStorage.removeItem` - 登录表单提交时的数据保存改为： ```javascript // src/views/login.vue localStorage.setItem("username", this.loginForm.username); localStorage.setItem("password", encrypt(this.loginForm.password)); localStorage.setItem("rememberMe", this.loginForm.rememberMe); ``` 这些调整能够减少因 Cookie 不适配带来的潜在问题。 #### 3. 统一路径解析方式 为了避免不同操作系统下路径解析的差异，建议将所有路径解析函数从 `path.resolve` 更改为 `path.posix.resolve`。例如： ```javascript const filePath = path.posix.resolve(__dirname, './assets/file.txt'); ``` 通过这种方式可以忽略操作系统的区别，从而保证路径一致性[^3]。 #### 4. 检查入口文件配置 确认项目的入口文件是否存在以及路径是否正确。如果报错提示类似于 `Error: Application entry file "index.js" does not exist.`，则需检查构建脚本和最终输出目录下的文件结构是否匹配。 对于 Electron 打包后的资源管理，推荐验证以下几点： - 构建命令是否成功完成； - 输出目录 (`dist_electron`) 下是否有完整的静态资源文件夹（如 `resources/app.asar`）； - 主进程代码中指定的应用启动入口是否指向实际存在的文件位置。 --- ### 总结 综合以上措施，可以通过切换路由模式、彻底迁移至 LocalStorage 存储机制、标准化路径解析策略以及仔细校验打包流程来解决 Ruoyi-Vue 在 Electron 环境下退出登录后出现白屏的现象。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值