Open hunter-ji opened 2 years ago
@royalscome 你好,首先感谢你对我的支持。然后你的这个报错是Not allowed to load local resource
,是chrome浏览器基于安全问题不允许读取本地文件,说不定这个可以帮助你。
https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource
是因为新项目没有build 根本没有dist/index.html @Kuari
是因为新项目没有build 根本没有dist/index.html @Kuari
改为:
mainWindow.loadURL('localhost:3000') // 这个 mainWindow.loadURL('http://127.0.0.1:3000/') // 或这个
是因为新项目没有build 根本没有dist/index.html @Kuari
多谢你的指出,我在文中特别提醒下。当前文章是最基础的完成,后面有后续的文章,去完善相关功能。 系列文章:
是因为新项目没有build 根本没有dist/index.html @Kuari
改为:
mainWindow.loadURL('localhost:3000') // 这个 mainWindow.loadURL('http://127.0.0.1:3000/') // 或这个
多谢你的指出,我在文中特别提醒下。当前文章是最基础的完成,后面有后续的文章,去完善相关功能。
系列文章:
我也遇到这个问题, 会不会是作者在这这个时候 electron 才15 现在已经20的原因
把vite.config.ts配置中的 base: path.resolve(__dirname, '/dist/') 改成上面的试试。
有可能
发自我的企业微信
----------回复的邮件信息---------- @.***> 于2023年3月29日(周三) 下午4:05写道:
我也遇到这个问题, 会不会是作者在这这个时候 electron 才15 现在已经20的原因
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>
把vite.config.ts配置中的 base: path.resolve(__dirname, '/dist/') 改成上面的试试。
改成 base: path.resolve(__dirname, './dist/').replace(new RegExp('\' + path.sep, 'g'), '/'),, 因为在Windows上,不加 replace的话解析路径不对,可以在生成的index.html里面看到解析的路径。
更新:使用 base: "./" 就可以了,更简单。
@Kuari
preload.js 寫法是不是要改? 20版本之後都沙盒化了, 我自行改成官網的寫法但似乎renderer介不到 @@?
@Kuari preload.js 寫法是不是要改? 20版本之後都沙盒化了, 我自行改成官網的寫法但似乎renderer介不到 @@?
你好,是这样的。我对比了一下,引入preload.js的方式不变,但是preload.js的写法变了。
const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('versions', {
node: () => process.versions.node,
chrome: () => process.versions.chrome,
electron: () => process.versions.electron,
// we can also expose variables, not just functions
})
我理解无法使用preload应该是版本的问题,当前版本确实太老了,版本已经更新很多了,最近正在准备写一下新的帖子。
我这个错误是不是说:不支持 ES6 的 import 语法?? 要怎么办?
也遇到了相同的问题,以上方法都解决不了,最终在package.json
的一级添加如下转为绝对路径: "homepage": "./",
我这个错误是不是说:不支持 ES6 的 import 语法?? 要怎么办?
我也遇到了相同的问题,请问解决了吗?
一. 简介
首先,介绍下
vite
和Electron
。当开始想用vue去开发一个桌面应用时,首先去搜索下,了解到当前如下两种现成方案:
vue-cli
中使用,使用vue add electron-builder
后可直接上手,免去了基础配置的步骤。但是其只能在vue-cli
下使用,无法配合vite
来使用。因此,若要使用
vite
和electron
,还需要自己来配置。源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_1
系列文章:
二. 创建一个Vite项目
1. 安装 vite
2. 创建项目
创建命令如下:
此处创建一个项目,名为kuari。
3. 进入且运行
进入项目,在运行前需要先安装下依赖。
在运行命令敲下的一瞬间,几乎是已经在运行了,不愧是vite。此时按照输出,打开地址预览,即可看到初始化页面。
至此一个基础的vite项目创建完成。
三. 配置Electron
1. 官方文档
在Electron官网的快速入门文档中,有官方给出的利用html、javascript、css来创建一个electron应用的案例,vite+electron的方案也借鉴其中。
2. 安装
首先安装electron至vite应用。目前electron的版本为
^15.1.2,
。3. 配置文件
1)vite.config.js
2)main.js
创建一个新的文件
main.js
,需要注意的是,该内容中index.html
的加载路径跟electron官网给的配置不同。3)preload.js
创建一个新的文件
preload.js
。4)package.json
为了确保能够运行相关electron的命令,需要修改
package.json
文件。首先需要去设置
main
属性,electron默认会去在开始时寻找项目根目录下的index.js
文件,此处我们使用的是main.js
,所以需要去定义下。最后我们需要新增electron的运行命令。
四. 运行
直接在终端输入如下命令:
接着我们就可以看到我们桌面应用就出来咯!
五. 最后
之前做项目一直用的Vue CLI Plugin Electron Builder,这次有个项目先用electron开发一下,推一波看看,后期看情况swift重新开发一个mac的桌面应用。也刚好尝尝鲜,一直没有机会试试vite。
electron这个东东确实很方便,就是打包出来的应用体积太大,真的是硬伤啊。这次目标人群首先是windows用户,所以上electron吧!
六. 参考文档