搭建electron+vue工程-基础版
发布时间：2023-08-03, 18:15:43 分类：Vue | 编辑 off 网址 | 辅助
图集1/3
正文 2250字数 39,696阅读
安装electron 包
npm install --save-dev electronRun code
Cut to clipboard
构建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)
})Run code
Cut to clipboard
preload代码如下：
const { ipcRenderer } = require('electron')
window.fromWebToElectron = function (a) {
console.log('打印消息内容', a)
//渲染进程往主进程发送test1消息
ipcRenderer.send('test1', a)
}Run code
Cut to clipboard
编辑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>Run code
Cut to clipboard
然后重新build vue工程
回到vue上级目录， 运行npm run start
点击测试按钮， 查看控制台中打印的消息内容， 工程搭建完成
（支付宝）给作者钱财以资鼓励 （微信）→
有过 2 条评论 »
Electron Security Warning (Insecure Content-Security-Policy) 告警解决
Electron的Console控制台出现如下告警时：
是安全策略的设置告警，意思是内容安全策略没有设置，或者使用了unsafe-eval的安全设置。如果想要不出现上述告警，有两种方式。
方式一：index.html文件里设置安全策略
在HTML主文件的头部引入安全策略的设置，采用如下设置，Electron的控制台就不会显示告警了：
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">上面的安全设置允许从index.html所在的节点加载各种资源，如果要从其它网站/节点加载内容，则要调整设置，实际上，每种资源的导入使用都可以指定特定的安全设置，如果有必要引入特定的资源安全设置，可以参考：https://content-security-policy.com/ 。
方式二：main.js文件里屏蔽安全告警
在Electron工程启动文件main.js的头部设置以下内容，也可以屏蔽安全告警在console控制台的显示：
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';改变key
v-if
vm.$forceUpdate()
这个方法用的不多，是强制更新视图。
但是vue是双向绑定的，数据变化，视图也会实时刷新，什么情况下会用到这个方法呢？
比如vue只针对数组的这些方法会刷新视图：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
所以比如你对数组的某个值重新赋值的时候，vue是不会刷新视图的。 那么你就可以用这个方法来强制刷新视图。
export default { data () { return { arr: [1, 2, 3] } }, methods: { editArr () { this.arr[0] = 0 // 视图不会刷新 }, forceUpdate () { this.$forceUpdate() // 调用这个方法会刷新视图 } } }vue实例执行这个方法的时候，仅仅只是刷新视图，实例对应的生命周期函数，计算属性，watch等不会重新执行。