美文网首页
Vue+Electron

Vue+Electron

作者: Felicity0512 | 来源:发表于2018-12-05 17:15 被阅读0次

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

    相关文章

      网友评论

          本文标题:Vue+Electron

          本文链接:https://www.haomeiwen.com/subject/wvdwcqtx.html