Electron Vue 构建桌面应用

最新推荐文章于 2024-01-12 15:03:26 发布

置顶 cyifang

最新推荐文章于 2024-01-12 15:03:26 发布

阅读量185

点赞数

分类专栏： electron+vue Electron Vue 文章标签： javascript typescript node.js vue.js

本文链接：https://blog.csdn.net/chuangyeifang163/article/details/108093682

版权

electron+vue 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

Electron

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

Electron + Vue 构建桌面应用

第一步环境准备

安装nodejs 中文官网-下载符合操作系统，默认安装即可
配置 npm 配置淘宝镜像
npm install package --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli（本文采用最新版本4.x）

npm install -g @vue/cli
## 如果已经安装，可以更新最新
npm update -g @vue/cli
## 查看版本号
vue --version
## @vue/cli 4.5.4
## 安装 vue-cli-plugin-electron-builder 插件
npm install -g @vue-cli-plugin-electron-builder

第二步创建项目

创建vue 项目
```
vue create hello-word
```
此安装过程可以默认安装，如果使用typescript 需要手动选择依赖，本文不在赘述。
使用vue-cli-plugin-electron-builder插件转换项目为electron项目
vue-electron-builder插件地址
```
vue add electron-builder
```
至此，项目创建成功！可以进行 Electron Vue桌面开发。

第三步配置相关

项目根路径创建文件 vue.config.js （参考如下配置）

module.exports = {
	  devServer: {
	    port: 8080, // 端口
	    host: '127.0.0.1', // 访问地址（域名或者IP）
	    overlay: {
	      warnings: false,
	      errors: false
	    }
	  },
	  lintOnSave: false,
	  // 以下为多页面配置
	  pages: {
	    workbench: {
	      entry: 'src/renderer/workbench/main.ts',
	      template: 'public/workbench.html',
	      filename: 'workbench.html'
	    },
	    login: {
	      entry: 'src/renderer/login/main.ts',
	      template: 'public/login.html',
	      filename: 'login.html'
	    }
	  },
	  pluginOptions: {
	    electronBuilder: {
	     // electron应用构建输出目录
	      outputDir: process.env.VUE_APP_OUTPUT_DIR,
	      builderOptions: {
	        appId: 'hello.world',
	        // 应用名称
	        productName: process.env.VUE_APP_PRODUCT_NAME,
	        copyright: 'Copyright © 2019.01 chuangyeifang163',
	        // 配置发布地址 用于发版更新
	        publish: [{
	          provider: 'generic',
	          url: process.env.VUE_APP_DOWNLOAD_URL
	        }],
	        // 兼容 32/64系统
	        win: {
	          icon: 'src/logo.ico',
	          target: [{
	            target: 'nsis',
	            arch: [
	              'x64',
	              'ia32'
	            ]
	          }]
	        }
	      },
	      // 主进程文件所在位置
	      mainProcessFile: 'src/main/main.ts'
	    }
	  }
  }