操作过程
1、配置electton全局和vue项目搭建
npm install electron --save-dev
在项目目录下新建vue.config.js文件，输入以下内容：
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"win": {
"icon": "./public/favicon.ico"
},
"mac": {
"icon": "./public/favicon.icns"
},
"productName": "My App",
"appId": "com.example.myapp"
}
}
}
}
然后使用Vue CLI安装插件：
vue add electron-builder
将public文件夹下的index.html修改为：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
<script>
const electron = require('electron')
const remote = electron.remote
const BrowserWindow = remote.BrowserWindow
let win;
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL('http://localhost:8080')
}
createWindow()
</script>
</body>
</html>
最后，使用以下命令启动项目：
npm run electron:serve
现在我们已经成功将Vue应用程序装配进Electron
2、在vue项目中添加插件
打开终端，输入以下命令，等待执行完成，安装electron-builder插件。
- yarn add electron-chromedriver --dev
- vue add electron-builder
执行命令vue add electron-builder，这里注意如果你使用git版本管理会有一个警告，输入'Y'。接下来会让你选择electron的版本，我选择13。执行完成后如下图
至此，我们已经完成Vue+Electron的整合，执行electron:serve并启动开发环境脚本。
注意，由于国内无法下载Vue DevTools插件，启动时会有错误。
可将background.js中这段代码注释掉即可。
此时Electron已经启动成功。
问题1---使用vue -v无法查看版本
vue : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https: /go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
使用命令行安装完成vue/cli脚手架后，使用vue -v无法查看版本
问题:系统禁止运行.psl后缀的脚本
解决方法：
搜索Windows PowerShell ,并以管理员身份运行
输入命令：set-ExecutionPolicy RemotoSigned
再根据提示填写 A 即可
结果：
electron 打“ERR_ELECTRON_BUILDER_CANNOT_EXECUTE”
electron 打包遇到的问题， 因为网络的问题，一下文件无法下载。
文件下载地址 ：https://npm.taobao.org/mirrors/electron-builder-binaries/
1.下载 与当前elecron本版一致的 electron-v13.2.3-win32-x64 然后放到 参考路径 ： C:\Users\Admin/AppData\Local\electron\Cache
2 下载 对应的 winCodeSign 解压后 放到 C:\User\Admin/AppData\Local\electron-builder\Cache 没有 winCodeSign 文件夹 自己新建
3. 下载对应的 nsis 和 对应的 nsis-resources 放到 C:\User\Admin/AppData\Local\electron-builder\Cache/nsis 下面
目录结构 ：
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
