electron项目使用vue以及打包生成安装程序_electron-forge vue_rainynights的博客

相关文章推荐
文武双全的松树 · 抖音商城，无处安放 | 人人都是产品经理· 2 月前 ·
想出国的烤地瓜 · 百度网盘超v送的下载券是一次性的吗？ - 知乎· 1 年前 ·
温暖的汤圆 · 终结即是开始-从一把剑开始杀戮进化-漫画牛· 1 年前 ·
卖萌的米饭 · 2021年的互联网平台竞争版图 | ...· 1 年前 ·
重感情的冲锋衣 · 《咒术回战0 ...· 1 年前 ·
Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（且有稳定维护的）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。
其中forge支持的框架模版可以参考下面的网址：
https://electronforge.io/templates
在这里插入图片描述
使用yarn安装 electron-forge：
yarn global add  electron-forge
创建electron-vue项目： 
electron-forge init my-new-project --template=vue
创建成功后的目录结构如下：
  
相比较electro-vue创建的项目目录，这个目录结构可谓是十分简洁了。 
我们看看package.json文件的内容：
  
在index.html页面中，我们可以看到怎么使用vue：
  
我们可以看到这里创建了一个vue的实例，然后挂载在了id为test的div上，让我们的网页秒变成了一个vue项目。 
接下来我们进行一点小的改动，让其的目录结构和electron-vue更加接近，也方便我们后续的使用。 
首先我们将vue的版本进行一下小小的升级，查看npm中vue的最新版本：
 
 当前版本未：2.5.22，修改package.json中vue的版本信息： 
"dependencies": {
    "electron-compile": "^6.4.4",
    "electron-devtools-installer": "^2.1.0",
    "electron-squirrel-startup": "^1.0.0",
    "vue": "^2.5.22" // 修改为当前npm支持的最新版本
执行命令进行更新： 
其次，如果我们的页面足够复杂的话，我们还需要添加vuex和vue-route，同样你可以在npm官网找到这信息(上面的页面往下看)： 
在工程目录下安装这两者： 
yarn add vuex
yarn add vue-router
安装后，package.json会添加两者到dependencies： 
"vue-router": "^3.0.2",
"vuex": "^3.1.0"
在src目录下创建router和store文件夹，并分别创建index.js:
  
store: index.js 
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({
export default store
router:index.js 
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import StartPage from "../component
/StartPage"
// 路由配置
export default new Router({
    routes: [
        { path: '/', component: StartPage },
        { path: '*', redirect: '/' }
其中StartPage就是我们的起始页面，我放在了component下面：
  
增加一个App.vue在根目录，作为vue的顶层路由组件： 
<template>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App',
</script>
接下来我们就需要修改index.html： 
<script>
  import Vue from 'vue';
  import App from "./App"
  import router from "./router"
  import store from "./store"
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app');
</script>
这里挂载vue实例，注意组件App请使用render: h => h(App)的方式，此时使用template的方式挂载是无法正常显示的。 
运行程序： 
yarn start

 接下来我们试试打包程序： 
yarn package
只是打包成一个目录到out目录下，注意这种打包一般用于调试，并不是用于分发 
PS D:\pptviewer> yarn package
yarn run v1.12.3
$ electron-forge package
√ Checking your system
√ Preparing to Package Application for arch: x64
√ Compiling Application
√ Preparing native dependencies
√ Packaging Application
Done in 302.47s.
此时会在工程目录下生成out文件夹：
 
  
electron-forge make 这个才会打出真正的分发包，放在out\make目录下
 使用–arch 和–platform参数来指定系统结构和平台,默认和当前系统一致
 另外.make是用squirrel打出来的包，安装后是放在%localappdata%下. 
yarn make

 使用默认配置打出来的包安装后源代码是可见的，这点大家的注意下了。 
这里我们还是使用electron-builder进行打包吧。 
yarn add electron-builder --dev
在package.json 添加如下配置： 
"scripts": {
   "build": "electron-builder",
"build": {
    "asar": true,
    "artifactName": "${productName}-${version}.${ext}",
    "compression": "maximum",
    "electronDownload": {
      "mirror": "http://npm.taobao.org/mirrors/electron/"
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true
    "publish": [
        "provider": "generic",
        "url": "http://localhost/download/"
    "productName": "appname",
    "appId": "appid",
    "directories": {
      "output": "build"
    "dmg": {
      "contents": [
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
          "x": 130,
          "y": 150,
          "type": "file"
    "mac": {
      "icon": ""
    "win": {
      "icon": "",
      "target": "nsis"
    "linux": {
      "icon": ""
yarn build
                    Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（ 且有稳定维护的 ）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。其中forge支持的框架模版可以参考下面的网址：https://electronforge.io/templates使用yarn安装  e...
				Vue CLI插件Electron Builder可以轻松构建带有Electron Build状态的台式机Vue.js应用程序：快速入门：在Vue CLI Plugin Electron Builder可以轻松地构建带有Electron Build状态的台式机Vue.js App桌面。 ：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。
然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！
您准备好出发了！
要启动开发服务器，请执行以下操作：如果您使用Yarn（强烈建议使用）：yarn electronic：serve或如果您使用NPM：npm run electronic：serve
npm run dev
# build electron application for production 只生成vue静态文件不会自动打包，打包程序已经关闭，因为打包会失败
npm run build
# 打包成桌面程序 执行如下命令 
electron-builder 
# lint all JS/Vue component files in `src/`
npm run lint
3.遇到BUG
文件路径不能包含中文
如果遇到下载不了的情况需要手动下载
https://npm.taobao.org/mirrors/electron/1.8.8/
放入C:\Users\Administrator\AppData\Local\electron\Cache
electron-builder 
 最终报错了，但是exe文件已经生成成功
1.	git clone https://github.com/electron/electron-quick-start**
2.	找到clone下来的项目入口文件main.js 和 package.json 修改路径配置**
	main.js :
3.	在已建好vue-cli项目中，安装electron依赖：**
npm install electron --save-dev
npm install electron-packager --save-de
 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。
 引擎盖下使用了超级快，下一代捆绑用于编译的。
 默认情况下，该接口使用Vue框架，但是您可以轻松使用任何其他框架，例如React ， Preact ， Angular ， Svelte或其他任何框架。
 Vite与框架无关
此模板由维护。 你可以  继续开发此模板。
 如果您有想法，问题或建议-欢迎进行。  :smiling_face_with_smiling_eyes:
 模板使用具有所有最新安全补丁程序的最新电子版本。
 应用程序的体系结构是根据安全建设和最佳实践。
 的最新版本用于编译应用程序。
 Vite用于捆绑所有源代码。 这是一款非常快速的打包机，具有许多强大的功能。 您可以在此视频中了解有关其安排的更多信息。
 Vite支持读取.env文件。 我的模板有一个单独的命令来生成带有类型定义您的
				Electron和 Vue 都是干啥的，就不做过多介绍了，可以去官网瞅瞅。下面总结 Electron+Vue 创建项目，Electron + Vue 创建项目实际上相当于：创建Vue项目 +Electron封装。
一、创建Vue项目 +Electron封装
1、创建Vue项目
　　(1)、通过 Vue脚手架工具 vue-cli 创建Vue项目：vue init webpack xxxxxx　　（注：项目名称中不能出现大写字母）
　　vue init webpack electron-vue...
				【练习代码git】：https://github.com/SmileEricXin/electronPractice.git
dev分支   提交：fea：引入VUE（非前端式引入）
【说明】：
  1.因为是通过electron-forge引入，使得electron-build相关指令运行时都会报错，因此只能在调试时使用 yarn start，其他指令都会运行失败；
				### 回答1：
electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架，可以使用 electron-builder 工具将其打包成 exe 文件。
以下是将 electron-vue 项目打包成 exe 的基本步骤：
1. 安装 electron-builder
在 electron-vue 项目的根目录下执行以下命令：
npm install electron-builder --save-dev
2. 配置打包参数
在项目根目录下创建一个 electron-builder.json 文件，用于配置打包参数。可以参考 electron-builder 的文档进行配置，主要包括应用程序名称、版本号、图标等。
3. 执行打包命令
在项目根目录下执行以下命令进行打包：
npm run build:win
该命令会生成一个 dist 目录，其中包含打包后的应用程序和安装程序，可以在 Windows 上运行。
以上就是将 electron-vue 项目打包成 exe 的基本步骤，希望对你有帮助。   
### 回答2：
electron-vue 是基于 Vue.js 和 Electron 的开发框架，可以快速构建桌面应用程序。在开发完成后，开发者需要将其打包成 .exe 格式（Windows 可执行文件），以便部署和发布。
以下是将 electron-vue 项目打包成 .exe 文件的步骤：
1. 准备工作
首先要安装 electron-packager 包，这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装：
npm install electron-packager --save-dev
2. 修改 package.json 文件
在 package.json 文件中，需要添加以下代码：
"scripts": {
  "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite"
这个代码段是一个命令，运行它可以将项目打包成指定平台（这里是 win32，也就是 Windows）的可执行文件，以 .exe 格式输出到指定目录（这里是 dist 文件夹）。其中，--icon 表示程序图标，--ignore 是忽略打包的文件夹，--overwrite 表示覆盖已有的输出文件夹。
3. 执行打包命令
在终端中输入以下命令，即可开始打包：
npm run package
然后等待一段时间，打包成功之后会在 dist 目录下生成 .exe 文件。
4. 发布
最后将 .exe 文件上传到合适的平台（例如 GitHub Release），这样用户就可以下载并使用了。
注意事项：
- 在打包时需要注意修改 .ico 图标文件的路径，确保能正确找到。
- 若需要打包成其他平台的可执行文件，可以修改 --platform 和 --arch 参数。
- 打包时，如果报错了，可以在命令行加上 --verbose 参数，查看具体错误信息。   
### 回答3：
electron-vue是一个基于vue.js构建的 electron框架的项目，可以让开发者快速地构建跨操作系统的桌面应用程序，并且electron-vue项目也非常容易打包成exe可执行文件，便于在Windows平台上使用。
打包electron-vue项目成exe的方法:
首先要在命令行中进入项目根目录，
然后运行：
npm run build
yarn run build
这两个命令将会编译和打包electron-vue项目，生成一个dist目录。
在默认情况下，打包出的exe应用程序是没有图标的，如果需要添加图标，需要在build目录下找到win下的icon.ico文件，并替换成你自己的图标文件。
接下来，需要使用第三方的打包工具，如electron-builder，打包成exe文件，命令如下：
npm run dist 或 yarn run dist
执行完这个命令后，就会在dist目录下生成一个installer目录，里面包含着生成的exe文件和其他必要的文件。
理论上，exe应用程序已经可以在Windows平台上使用了。
electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令，然后使用第三方打包工具electron-builder打包，就可以生成一个可执行的exe文件了，这样就极大地方便了开发者在Windows平台上部署应用程序。