vue项目包装成electron桌面应用（超简单！！只需四步）_vue项目改为electron

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1、安装nodejs

2、配置淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装git

以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可

1、全局安装electron及electron-packager

全局安装electron ; 全局安装electron-packager，用于打exe包

cnpm install electron -g

cnpm install electron-packager -g

2、git下载官方示例并运行

在某一个目录下右键，点击“Git Bash Here”

依次执行以下命令，克隆示例后进入示例文件夹并用淘宝镜像安装依赖包（也可以直接用npm，但是会慢很多），运行项目

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

cd electron-quick-start

cnpm install

npm run start

会出现以下界面，表示运行成功

3、修改vue项目vue.config.js并构建

由于我们以往构建的vue项目是需要放在服务器上，一般不能够在本地直接打开index.html，其中的原因主要是静态文件的引用路径问题。

以vue-cli脚手架的vue.config.js为例

将publicPath修改为“./”

cd到vue项目根路径。执行npm run build，生成dist文件夹，此时我们直接在文件管理器中双击index.html，可以直接打开项目

将dist文件夹下的所有内容复制到electron-quick-start示例根路径下，覆盖原有index.html

在此目录下运行

npm run start

会发现我们的项目已经显示在桌面应用窗口中

4、打exe包

在pakage.json中的scripts中添加以下命令

"build": "electron-packager . myapp --out myapp --arch=x64 --overwrite --ignore=node_modules"


**收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。**
![img](https://img-blog.csdnimg.cn/img_convert/8d32282b2b4a2d7bca68068fd1e41e18.png)
![img](https://img-blog.csdnimg.cn/img_convert/e9aafa6ed008bebcc5b590d2080a075d.png)

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

csdn.net/topics/618679757)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**

**都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**