electron-vue创建项目

1、安装npm install -g @vue/cli @vue/cli-init

@vue/cli-init 应该就是为了可以创建vue-cli2项目

@vue/cli-init 没有安装的话 下面的指令无法执行

2、执行命令创建项目 vue init simulatedgreg/electron-vue 项目名

3、cd 到刚才创建的项目

4、安装electron 自带的版本太旧了 yarn add electron@13.1.2 -D 我这里指定比较新的版本安装

5、执行yarn install 安装其他组件

 

运行出错，在主进程src/main/index.js中 添加 webPreferences

electron 在10.x版本以后默认关闭了remote

enableRemoteModule 开启remote

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

 

打包出错问题

1、打包直接出错 tasks变量重复了，我把前面的修改为_tasks

.electron-vue/build.js

 

 

2、出现错误electron-v13.1.2-win32-x64.zip 或者 electron-v13.1.2-win32-ia32.zip下载错误

从网上搜索github网站无法访问或者下载慢问题，使用了修改host文件的方法，感觉有点用，多次打包情况下还是下载下来了

3、出现错误 Application entry file "dist\electron\main.js" in the "D:\electronWork\new-edu-001\build\win-unpacked\resources\app.asar" does not exist

我们需要安装multispinner      yarn add multispinner -D

然后在.electron-vue/build.js 文件中添加一句

const Multispinner = require('multispinner')

4、winCodeSign-2.6.0.7z 也是一直下载出错，自动下载好几遍才下载下来

5、nsis-3.0.4.1/nsis-3.0.4.1.7z 下载出错了

重复执行打包指令 最后下载成功了

 

winCodeSign-2.6.0.7z 和nsis-3.0.4.1.7z 可以在下面的地址下载

https://github.com/electron-userland/electron-builder-binaries/releases/

下载后 解压到 C:\Users\用户\AppData\Local\electron-builder\Cache 目录下就可以了

 

electron-xxxxxx.zip安装下载文件失败

解决方法 使用（淘宝源或者官方源都可以） 并设置electron仓库为淘宝的源

# 官方源
npm config set registry https://registry.npmjs.org
yarn config set registry https://registry.yarnpkg.com

# 淘宝源
npm config set registry  https://registry.npm.taobao.org
yarn config set registry  https://registry.npm.taobao.org

# 设置electron仓库为淘宝的源  主要是这一步起作用 上面可以使用官方源
# 注意https://npm.taobao.org/mirrors/electron/最后的斜杠不要省略
# 注意url最后的斜杠不要省略
# 注意url最后的斜杠不要省略
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/