接下来做一个简单的 Electron 应用,要求为应用启动后显示一个主窗口,在主窗口里有一个按钮,点击这个按钮后新显示一个窗口,且使用 React 开发网页。 由于Electron 应用中的每一个窗口对应一个网页,所以需要开发2个网页,分别是主窗口的index.html和新打开的窗口login.html。 也就是说项目由2个单页应用组成,这和3-10管理多个单页
今天我们将在前端开发中最为常见webpack加入到Electron中,因为GUI引用不同于传统的Web前端项目,所以webpack的配置会相对繁琐,这里我们主要用到了electron-webpack,但是要说明的是,这个项目因作者时间不够充足已经有挺长时间没有更新了,同时在也寻找一起维护的作者,所以今天的案例一定要注意所安装依赖...
首先我们用webpack打包文件,在dist/下生成bundle.js和style.css yarn run electron 开始调试: 构建App 我们在package.json文件里添加如下命令: "packager": "electron-packager . --platform=darwin --electron-version=1.7.9 --overwrite" 意思为构建Mac桌面应用,并覆盖之前我们使用该命令构建的文件。 等待一会儿会...
首先我们用webpack打包文件,在dist/下生成bundle.js和style.css yarn run electron 开始调试: 构建App 我们在package.json文件里添加如下命令: "packager": "electron-packager . --platform=darwin --electron-version=1.7.9 --overwrite" 意思为构建Mac桌面应用,并覆盖之前我们使用该命令构建的文件。 等待一会儿会...
target: 'electron-renderer', 这句配置曾在2-7其它配置项-Target中提到,意思是指让 Webpack 构建出用于 Electron 渲染进程用的 JavaScript 代码,也就是这2个窗口需要的网页代码。 以上修改都完成后重新执行 Webpack 构建,对应的网页需要的代码都输出到了项目根目录下的 dist 目录里。 为了以 Electron 应用的形式...
join(__dirname, 'dist'), compress: true, port: 9000 }, // 其他配置 resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, // 针对Electron的特定配置 target: 'electron-renderer' }; 这个配置示例包括了: Vue文件的处理(使用vue...
Addedtarget: 'electron-renderer'to yourwebpack.config.jsinstead of using this module: module.exports={target:'electron-renderer',// ...others}; See the examplehere. License MIT ©C.T. Lin Releases4 v0.4.0Latest Apr 1, 2016 + 3 releases ...
electron 使用webpack打包遇到一个问题。本来如果你的网页单纯运行在electron里面是没有问题的。配置文件里面加上这个就行 target: 'electron-renderer', 但是现在的问题就是,我的网页,想通过浏览器http://127.0.0.1:8088/index.html 这样的形式也能访问。 所以,现在就是,一个网页,既可以运行在electron里面,也要能...
Electron可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。 Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互。
Electron + Webpack + Vue 搭建开发环境及打包安装 --- 打包electron应用 三、打包Election App 应用 在之前的节中已经写了渲染进程的打包,以及主线程的简单打包构建,那么这节就把之前两节的内容进行组合在一起。 1. 搭建项目 首先在项目目录文件下运行 npm init -y 初始化项目生成package.json 文件 目录...