搭建electron+vue工程以及遇到的问题解决

1. 安装node

细节不多说， 下载安装包安装就行了

2. 配合npm镜像地址

npm config set registry http://registry.npm.taobao.org/

检查设置的镜像

npm config get registry

3. 安装vue

npm init
# 填写项目名， 作者等信息

npm install -g vue-cli
# 安装vue
# 安装成功后， 通过命令  vue -V   检查vue版本

#初始化vue项目， testvue是项目名称
vue init webpack  testvue

#修改vue构建配置
#进入目录 testvue中
#编辑 config/index.js文件
#修改build的配置如下
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../app/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../app'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    ... ...
 }

#尝试构建下vue工程
npm run build

#返回上层目录， 会看到多了一个app文件夹， 进入， 双击index.html文件， 在浏览器中看到vue界面， 表示vue项目构建成功

 

3. 安装electron

#返回到vue工程上级目录
#安装electron 包
npm install --save-dev electron

#如果报错ECONNRESET
#重新执行安装命令， 在运行 node install.js时， 中断安装
#cd node_modules/electron/目录下
#编辑 install.js
#修改 downloadArtifact
downloadArtifact({
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  checksums: process.env.electron_use_remote_checksums ? undefined : require('./checksums.json'),
  mirrorOptions: {
    mirror: 'https://cdn.npm.taobao.org/dist/electron/',
    platform,
    arch
  }
 
})
#然后手动安装
node install.js

#返回项目根目录， 也就是vue工程上级目录
#安装electron-builder， 用于最后打包
npm install --save-dev electron-builder

#编辑package.json文件

#修改main的文件位置， "main": "app/main.js",

#scripts添加俩个命令
scripts{
"start": "electron .",
"build": "electron-builder"
}

#添加构建配置
"build": {
    "appId": "testelectron",
    "electronDownload": {
      "mirror": "https://cdn.npm.taobao.org/dist/electron/"
    },
    "files": [
      {
        "from": ".",
        "to": ".",
        "filter": [
          "**/app/**/*",
          "**/package.json"
        ]
      }
    ],
    "win": {
      "target": "zip"
    },
    "artifactName": "testelectron-${version}-${arch}.${ext}"
  }

4. 构建electron工程

在app目录下新建俩个文件

main.js    #electron主工程文件

preload.js  # 用于页面预加载， 使页面渲染进程可以和主进程通信

main.js代码如下：

const {app, BrowserWindow, ipcMain} = require('electron')

const path = require('path')

let win

let windowConfig = {
  width: 800,
  height: 600,   //窗口大小
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),  //预加载 消息通信 文件
    nodeIntegration: true,
    contextIsolation: false,      //上下文环境隔离设置， 影响预加载文件中的消息通信函数能否在前段页面中使用， 设置为false不隔离
    webSecurity: false
  }
}
function createWindow () {
  win = new BrowserWindow(windowConfig)
  win.loadFile(path.join(__dirname, 'index.html'))   //加载页面文件
  win.webContents.openDevTools()
  win.on('close', () => {
    win = null
  })
  win.on('resize', () => {
    win.reload()
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
  app.quit()
})
app.on('activate', () => {
  if (win == null) {
    createWindow()
  }
})
//接收  消息 test1, 打印消息内容
ipcMain.on('test1', (event, arg) => {
  console.log(arg)
})

preload代码如下

const { ipcRenderer } = require('electron')

window.fromWebToElectron = function (a) {
  console.log('打印消息内容', a)
	//渲染进程往主进程发送test1消息
  ipcRenderer.send('test1', a)
}

编辑vue中的HelloWorld.vue文件， 删掉哪些连接之类代码， 添加一个发送消息的测试按钮， 点击按钮， 发送一次 test1的消息， 测试下，修改后的代码如下：

<template>
  <div class="hello">
    <button v-on:click="btnTest()">test</button>
  </div>
</template>

<script>
const ipcsend = window.fromWebToElectron
export default {
  name: 'HelloWorld',
  created () {

  },
  methods: {
    btnTest: function () {
      console.log(ipcsend)
      ipcsend ? ipcsend('test1 content') : alert('click')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

然后重新build vue工程

回到vue上级目录， 运行npm run start

点击测试按钮， 查看控制台中打印的消息内容， 工程搭建完成