本文介绍如何将Vue项目与Electron结合，通过修改index.html、配置vue.config.js、调整package.json，实现Vue CLI项目在Electron中的运行。文章详细描述了CLI打包过程、 Electron的启动和打包，探讨了electron-builder与electron-packager的使用，并讨论了后续优化方向。
总得有个开始
前置条件：
- Electron开发 —— 简单demo
- vue开发 —— 简单demo
- vscore编辑器（非必须，自选喜欢即可）
- 本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网
一：步骤：
1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章节demo，故先采取js引用，仅修改的index.html，其他不变，改动如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Demo</title>
</head>
<body>
<div id="app">{
{ content }}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
content: '潇风剑易水',
},
});
</script>
</body>
</html>1. 1、运行结果如下：
npm startdemo运行图：
最低0.47元/天 解锁文章
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
