electron+Vue 文件打包dist路径遇到file///错误解决方式（四）

最新推荐文章于 2023-07-07 14:41:56 发布
最新推荐文章于 2023-07-07 14:41:56 发布
阅读量1.9k 收藏 1
点赞数 1
文章标签： vue.js electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SquirrelPineal/article/details/125885152
版权

在开发electron打包vue的时候，会生成一个dist文件,然后在使用过程会发现file:///login?问题

方式一：http通信解决

解决方式：在生产环境中将路由地址写死就可以访问本地的了，远程同理

最好的方案是用IPC和后端直接通信，这样即可避免接口请求问题。

如果你感觉你写代码容易卡住，没有解决方案，不如重写一套会解决你杂乱的代码

SquirrelPineal
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
electron + vue 项目运行打包配置文档
01-08
2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置** main.js : 3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de
electron-vue爬坑之打包后接口路径file://
sake_pipi的博客
10-13 5155
最近解决了一个关于electron-vue打包后接口路径出现file://的问题 历经资料一顿找也没找到 现在解决了以后，我把它发出来提供给那些有需要的人 这个平台不发正文 浏览跳转electron-vue爬坑之打包后接口路径file:// ...
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT（已解决）
zhang33565417的博客
08-16 6140
开发的时候碰到一个莫名其妙的错误，其中一个页面就是进不去，其他的页面可以进去 控制台报了一个这样的错误： Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 最后发现是特么AdBlock插件把这个页面当做广告页面给拦截了！！！！！！！！！ 把这个插件禁用了就好了，真特么沙雕！ ...
vue打包build后资源文件变file:///
wasd986523的博客
02-19 1559
在项目根目录下 建立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｜问题记录」解决应用调用loadURL访问没有ssl证书的http网址连接失败的问题
过美好生活，做高效程序员
12-15 2801
本文主要记录在使用electron访问http网址（非https）时，应用窗口不显示网页，命令行提示`handshake failed; returned -1, SSL error code 1,`
electron + vue2.X本地运行及打包遇到的各种版本问题、文件找不到问题汇总
hbjiankely的博客
08-19 3210
electron + vue2.X本地运行及打包 ps: 打包环境为windows 7 基础配置及版本 node版本 node v11.7.0 npm版本 v6.2.0 electron版本 v7.3.3 electron-packager v14.2.0 .NET Framework v4.5 powershell v5.1 ps: 1、node v14版本需要windows 10 2、electron v13.1.9需要node v14以上版本支持 3、electron-packager
【桌面开发】Electron+vue框架+vs-code&vs-code调试环境搭建
lichong951的专栏
09-23 2144
环境准备。
启动electron-vue后报错（Html Webpack Plugin: ReferenceError: process is not defined）
Hiny2y2的博客
06-23 922
启动electron-vue项目后出现以下错误： 在github上找了一下解决方法： 打开项目目录下的src/index.ejs文件 <body> <div id="app"></div> <!-- Set `__static` path to static files in production --> <% if (!process.browser) { %> <script>
使用electron打包exe出现报错 /E:/prod-api/captchaImage:1 Failed to load resource: net::ERR_FILE_NOT_FOUND（若依）
阿丹的博客
07-07 493
阿丹：因为刚接触electron打包客户端，刚解决完css文件找不到的问题，又出现了如下问题。
银河麒麟 electron loadURL打不开，loadFile 传参
zcc的博客
08-25 2513
使用electron 开发桌面应用时：以下代码，windows 下 electron（都是10.1.3版本） 使用loadURL 可以打开，但麒麟 下loadURL 不行，白屏。在麒麟下软件左上角图标icon 要改成 png 格式，512*512 才能显示。内核：Linux 5.4.18-28.23-bj-generic。版本：银河麒麟桌面操作系统V10（SP1）架构： loongarch64。
electron 打包后 __static_electron-vue爬坑之打包后接口路径file://
weixin_28687251的博客
02-03 2644
最近开发electron-vue的时候遇到一个坑于是到网上一顿找但根据每个人的写法或用的框架不一致导致网上的资料不是正确的最终结果是也没找到解决方案就像在平坦的柏油路上奔驰一个小坑会让你措不及防而翻车坑1、在vue-cli创建的electron项目中，dev环境下用axios访问接口跨域问题这个问题好解决在vue.config.js配置中写入如下代码module.exports = {// 第三方...
前端毕业设计大作业基于Electron+Vue构建的桌面音乐播放器源码.zip
06-15
期末大作业基于Electron+Vue构建的桌面音乐播放器源码。 特性 支持音乐频谱 界面友好，支持皮肤切换 跨平台，可打包Windows、Mac、Linux 良好的架构模式和代码风格 提供支持主流的第三方音乐平台 期末大作业基于...
Electron + vue 打包桌面操作流程详解
10-16
主要介绍了Electron + vue 打包桌面操作流程,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
electron+vite+vue3+sqlite3基础框架
最新发布
12-14
这是一个electron+vite+vue3+sqlite3基础框架，里面都已配置好，开箱即用，压缩包中写了详细的使用说明
Electron-与Vue合并实现热重载
繁花落幕的博客
02-24 1543
前言 vue 或 ng 项目要在 electron 下运行，通常要先打包，然后将打包后的内容挪到 electron 项目下再运行，流程： build --> 复制 --> electron . 上面的步骤略微麻烦，合并项目可以简化手动步骤，一部到位： build && electron . 缺点是不能实现热重载，肯定有办法可以实现，但是我不会 (￣▽￣)"，暂时...
搭建Electron+vue
小祝的专栏
09-06 2008
一、安装nodejs 二、安装vue-cli脚手架 输入命令：cnpm install --global vue-cli 验证是否安装成功输入vue出现下面信息说明安装成功 三、搭建vue项目 1、使用命令创建项目 vue init webpack demo2 完成后目录如下： 成功之后查看启动项，打开demo2>config>index.js： 执行命...
electron-vue当中win.loadURL弹窗问题解决
brimen的博客
09-05 8516
在electron+vue脚手架项目当中，vue+vue-router一般应用于单页面应用程序，如果是弹窗的话，一般用的都是“dialog”,但是“dialog”不能满足我们特定的需求，基于原生弹窗有两种方式。 ...
electron报错：Error: Electron failed to install correctly, please delete node_modules/electron and try
程序源的博客
09-07 748
在win10上在搭建electron-vue项目时，使用npm install命令报错 报错： Error: Electron failed to install correctly, please delete node_modules/electron and try installing again 解决方法： 命令行进入项目中node_modules/electron目录，运行node install.js命令即可 ...
Error: Electron failed to install correctly, please delete node_modules/electron and try installing
Dominic_W的博客
03-24 4036
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
搭建一个electron+vue3的项目
03-31
1. 首先需要安装Node.js和npm。 2. 创建一个空文件夹，并进入文件夹。 3. 在命令行中输入以下命令，初始化一个新的npm项目： ``` npm init -y ``` 4. 安装electron： ``` npm install electron --save-dev ``` 5. 安装vue： ``` npm install vue ``` 6. 安装vue-cli： ``` npm install -g @vue/cli ``` 7. 创建一个新的Vue项目： ``` vue create my-project ``` 8. 进入Vue项目的根目录，安装必要的依赖： ``` cd my-project npm install --save-dev electron-builder vue-cli-plugin-electron-builder ``` 9. 创建一个新的electron主进程文件： ``` mkdir src/electron touch src/electron/index.js ``` 10. 在`src/electron/index.js`中添加以下内容： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, } }) // 加载应用的 index.html win.loadFile('dist/index.html') // 打开开发者工具 win.webContents.openDevTools() } // Electron 会在初始化完成并准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持活动状态。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，当单击 dock 图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 11. 修改`package.json`文件，添加以下内容： ```json "main": "src/electron/index.js", "scripts": { "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "build": { "productName": "My App", "appId": "com.example.myapp", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "src/electron/**/*" ], "extends": null, "extraResources": null }, "devDependencies": { "electron": "^13.2.1", "electron-builder": "^22.11.7", "vue-cli-plugin-electron-builder": "^2.0.0-rc.6" } ``` 12. 在命令行中运行以下命令，启动electron应用： ``` npm run electron:serve ``` 13. 如果一切正常，electron应用将会启动并显示出Vue应用的界面。现在可以开始开发Electron + Vue应用了。若要打包应用，请运行以下命令： ``` npm run electron:build ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值