美文网首页Vue时光轴
vue项目打包成桌面应用

vue项目打包成桌面应用

作者: lzm_CX330 | 来源:发表于2021-05-10 14:49 被阅读0次

    1:clone electron的官方例子:

    git clone https://github.com/electron/electron-quick-start 
    

    2:打包你的项目,将打包出来的 dist 文件夹复制到之前下载的electron项目中

    npm run build
    

    3:删除electron项目中的index.html文件

    4:在electron项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html:

    mainWindow.loadFile('./dist/index.html') 
    

    5:在electron项目中检查 package.json 的命令,正常情况下,运行下列指令即可进行打包效果预览:

    // 国内网络下载electron可能很慢,建议设置
    // npm config set registry https://registry.npm.taobao.org/
    // npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
    npm install 
    npm run start 
    

    6:下载打包需要的依赖 electron-packager

    npm install electron-packager --save-dev 
    

    7:进入 package.json ,在 scripts 中添加 packager 指令

    "scripts": { 
    "start": "electron .", 
    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
    } 
    

    8:运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件:

    npm run packager 
    

    打包为桌面应用后,登录无法跳转,可能是因为vue项目中使用了cookie存储信息,而打包后的桌面应用无法兼容,更改使用localstorage或session后重试即可

    相关文章

      网友评论

        本文标题:vue项目打包成桌面应用

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