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

小鱼儿 2022-11-28 13:46 759阅读 0赞

### 准备工作 ###

1、[安装nodejs][nodejs]

2、配置淘宝镜像

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

3、[安装git][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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

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

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

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

将publicPath修改为“./”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

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

![20200818101842522.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2][]

在此目录下运行

npm run start

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

## 4、打exe包 ##

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

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

说明

electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3][]

打开cmd终端，执行npm run build

npm run build

打包后如图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 4][]

双击myapp.exe即可打开桌面应用

以上，感谢观看

[nodejs]: https://jingyan.baidu.com/article/e4511cf38c05092b845eaf9b.html
[git]: https://git-scm.com/downloads
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221124/a073204dd3b847d8a43227f542e74adf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20221124/ec88c81df5bb4b4b8b076ecef21a7a78.png
[20200818101842522.png]: /images/20221124/867378fd1a494b37aefa1460ffc4b0d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2]: /images/20221124/af0f2ca8b3184e7f8fa038bdbd946e13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3]: /images/20221124/a2091b0a3cb54a4f8d13b777543aa97b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 4]: /images/20221124/665f58843bfd46fe86876a3a4a2e1d1c.png