electron + vue 项目运行打包配置文档

vue-cli 初始化vue项目构建

 vue init webpack project-name

electron 配置源码:

electron
1. git clone https://github.com/electron/electron-quick-start**

2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置**

	main.js :

main
3. 在已建好vue-cli项目中,安装electron依赖:**

npm install electron --save-dev
npm install electron-packager --save-dev

4. 将修改后的main.js 拷到vue项目中的build文件夹下,并重命名为electron.js**
并将main.js 拷贝到vue项目的根目录下
并在vue项目根目录下新增preload.js 文件 (文件预处理、预加载的地方)
并更改 config/index.js 中的assetsPublicPath

assetsPublicPath

**5. 在vue项目中的package.json 文件中新增 ****

package
**6. 此时 就可以在命令行执行 npm start 命令 可打开electron窗口调试及更改代码 ****
vue

7. 打包 :**
首先打包vue项目,build出来生成dist文件
1) 复制build文件夹下的electron.js 文件到dist目录修改文件名为main.js ,后修改loadUrl路径的格式
在这里插入图片描述
2) 接着复制package.json 到dist目录中。
3) 将vue项目根目录中的package.json (注意不是dist下的)新增electron_build 命令
在这里插入图片描述
8. 最后,运行:**

npm run build 
npm run electron_build 

在这里插入图片描述
最后,我们基于 js 的前端桌面应用就已经打包完成了~

发布了26 篇原创文章 · 获赞 15 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/Shuanger112/article/details/103683590