Vue+Electron

2018-12-05  本文已影响0人  Felicity0512

坑爹的,发现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项目了。

上一篇下一篇

猜你喜欢

热点阅读