坑爹的,发现electron+vue的话,应该先安装vue。
创建vue项目
前提已安装vue-cli脚手架。
$ vue init webpack demo
demo为你的项目名称。
创建项目对应操作
别人的图,我的话全程yes。
运行vue测试环境:
$ npm run dev
确认是否安装完成。
Electron与vue的合并
修改vue项目根目录下,config\index.js文件:
module.exports = {
...
build: {
...
assetsPublicPath: './',//修改此处参数为./,这一步非常非常重要,不然打包后主页为空白页面。
...
}
...
}
在vue项目根目录下,新建dist文件夹。
将之前electron项目根目录下的文件,复制到dist文件夹中。
#打包文件,dist中生成index.html覆盖electron项目。
$ npm run build
#进入dist文件夹
$ cd dist
#运行electron
$ npm start
此时就能看到electron运行的vue项目了。
网友评论