electron-vue架构解析2-生产环境打包过程分析（原）

最新推荐文章于 2024-05-15 10:44:57 发布
最新推荐文章于 2024-05-15 10:44:57 发布
阅读量3.5k 收藏 2
点赞数 1
分类专栏： 源码 前端 文章标签： electron vue electron-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010961631/article/details/80648825
版权

    上一节我们了解了electron-vue的整体介绍，这一节我们分析生产环境的打包流程。
    从package.json文件入口来看打包命令和调用的脚本：

      "scripts": {
    "build": "node .electron-vue/build.js",
    "build:darwin": "cross-env BUILD_TARGET=darwin node .electron-vue/build.js",
    "build:linux": "cross-env BUILD_TARGET=linux node .electron-vue/build.js",
    "build:mas": "cross-env BUILD_TARGET=mas node .electron-vue/build.js",
    "build:win32"
    最低0.47元/天 解锁文章
    工程师阿杜
    关注
    • 1
      点赞
    • 踩
    • 2
      收藏
      觉得还不错? 一键收藏
    • 1
      评论
    专栏目录
    vue项目打包exe
    jason_hw5d的博客
    02-19 617
    准备工作 安装vue npm install -g @vue/cli npm install -g @vue/cli-init 创建项目vue vue init webpack my-vue-project 安装electron npm install -g electron 安装electron打包工具 npm install -g electron-packager 打包E...
    Vue项目打包成exe可执行文件（无瑕疵，完美版）
    热门推荐
    往事随风
    11-09 1万+
    Vue项目打包成exe可执行文件 实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可 1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目 git clone https://github.com/electron/electron-quick-start npm i npm run start 2、修改自
    electron 如何打包vue项目
    最新发布
    qwer8wqer的博客
    05-15 358
    vue项目打包桌面应用程序
    vue打包exe
    H30919的博客
    02-14 409
    vue打包exe
    vue项目打包成exe
    weixin_42028153的博客
    08-16 2060
    由于electron的源是国外的，如果没有翻墙，下载起来会很慢，网上普遍的建议是更换为淘宝的镜像就行下载，但是我本机无论是官方的还是淘宝的镜像都不行，大家可以根据自己电脑网路情况进行尝试，我本机尝试了很多次都不行，同事给的包在本机执行也报错，无奈只能网上继续找方法。打包你的项目，我相信这步你已经轻车熟路了~，将打包出来的 dist 文件夹复制到之前下载的A文件夹中。天地图拒绝了项目的访问，这个原因可能是因为天地图的key的问题，因为账号不是我申请的，未测试，待解决。
    将Vue项目打包成exe可执行文件
    w15635748705的博客
    06-20 6874
    首先先打包vue文件我的目录结构是这样的: 然后新建文件 添加如下代码： 然后打开终端窗口： 输入打包指令： 输入打包指令： 打包完成之后会在目录中生成文件 可以在浏览器打开中的文件查看是否白屏，如果白屏可能是路由模式的问题 不要使用 模式这样的话我们的静态文件就准备好了官方网址：https://www.electronjs.org/在桌面上新建一个文件夹 在里面按住 点击右键 打开窗口 在窗口中输入指令： 没有git的可以自行去下载一个 网址：https://git-scm.com/ 下载.
    electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
    05-02
    electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
    electron-vue-vite-webpack:Electron、vue3、vite2、webpack5、ant-design-vue2 整合
    05-17
    Electron + vue3 + vite2 + webpack5 + ant-design-vue2 如何和为什么 Vite是未来的脚手架 在开发期间使用“拜访”以保持快速启动的优势 使用“ webpack”解决包装期间的包装问题 命令 npm run dev npm运行构建 ...
    Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
    04-01
    Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
    electron-vue 打包所需文件
    03-23
    C:\Users***\AppData\Local\electron-builder 下的Cache文件，当electron-vue打包出现问题时，可替换本地的Cache文件
    electron-vue利用webpack打包实现多页面的入口文件问题
    10-17
    项目需要在electron的项目中新打开一个窗口，利用webpack作为静态资源打包器，发现在webpack中可以设置多页面的入口，今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验,需要的朋友可以参考下
    vue打包为exe程序的demo包，全都配置好了，里面有详细使用流程
    05-31
    该资源用于将vue项目打包为exe程序，里面有详细使用流程，只需要将你按照我的博客https://blog.csdn.net/qq_41579104/article/details/107340431里面的正式打包步骤打完dist包之后，将dist里面的内容复制进我发布的demo里面的dist文件夹里面即可，之后可在dist文件夹下使用electron .命令去运行exe界面，还可使用npm run dist去打包为exe程序。双击即可打开，接口也访问正常。关注我，私信我，也可以免费发给你哦~
    使用electron将vue-cli项目打包成exe的方法
    10-17
    A minimal Electron application
    vue项目打包成.exe桌面应用
    月兒~圓
    05-30 1440
    整理一下本人实现vue项目打包成桌面应用的流程 一、新建文件夹，使用git下载 # gitee git clone https://gitee.com/wallace5303/electron-egg.git # github git clone https://github.com/wallace5303/electron-egg.git 二、进入到electron-egg cd electron-egg-> npm install 三、把你的项目打包成dist文件，生成的dist文件把 el
    将vue项目打包成电脑端应用.exe
    Lushengshi的博客
    01-10 6350
    vue项目打包成桌面应用程序.exe!
    【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）
    我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
    08-06 5038
    cnpm i electron -D & cnpm i electron-packager -D 在build/创建electron.js // Modules to control application life and create native browser window const {app, BrowserWindow} = require('electron') const path = require('path') function createWindow () { .
    vue + electron 打包成桌面应用exe
    qq_42214033的博客
    07-24 1815
    vue + electron 打包成桌面应用exe 1. 背景 由于老板突然让我将之前做的一个vue项目套壳成一个桌面应用程序，一头雾水的我开始百度，然后就找到了electron。他是一个跨平台的桌面应用开发工具。看了看后就开始了了解之路。 2. electron 安装 electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。所以首先要确保你的电脑上有node环境。 先从Github上将electron项目下载下来 1. git clone https://github.com/
    【教程】将Vue项目打包为exe项目的教程-我的第一个原生Vue项目
    不食花生的猫：http://110.40.191.51/
    04-15 2386
    最近应朋友所需，开发了一个点单系统，由于放在浏览器中有诸多不便，因此考虑将其打包为exe可执行文件，该文章详细记录了打包步骤与注意事项。
    如何将vue项目打包成.exe文件，不想踩坑就来这里！
    weixin_61877032的博客
    07-03 6742
    如何将vue项目打包成.exe文件；electron打包后的.exe文件请求域名为何为file:///；electron打包后的文件路由无法挑战；
    electron-vue electron-log
    12-15
    electron-vue 是一个基于 electron 构建的 vue.js 框架。它结合了 vue.js 和 electron，可以让开发者使用 vue.js 的组件化开发方式来构建跨平台的桌面应用程序。使用 electron-vue 可以快速搭建 electron 应用的基础...

    “相关推荐”对你有帮助么？

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论 1
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值