Vue项目打包成exe可执行文件的实现过程(无瑕疵,完美版)
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、修改自己项目的vue.config.js，路径必须修改为 ./，不是这个后续打包好的页面可能会出现白屏，加载不出来的情况
module.exports = {
publicPath: './',
}
3、打包自己的Vue项目，这步应该很熟了，将打包出来的 dist 文件夹复制到之前拉取的electron-quick-start文件夹中，和node_modules同级就行
npm run build
然后咱自己的项目就不用管了，剩下的就交给拉下来的electron-quick-start项目吧
4、在electron-quick-start项目中，下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
5、进入electron-quick-start项目，删除项目根目录下的 index.html 文件
6、在electron-quick-start项目中找到入口文件 main.js ，修改打包的文件路径为我们的index.html（替换成我们的文件非常非常的重要，注意行数，一般都在16行多一点）
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')*
7、在electron-quick-start项目中，进入 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
9、打包完以后，项目中会出现 App-win32-x64文件夹，进去之后，双击App.exe就可以访问了
10、你已经成功了，撒花
总结
到此这篇关于Vue项目打包成exe可执行文件的文章就介绍到这了,更多相关Vue项目打包成exe可执行文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
现在vue项目中，一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下2019-06-06
vue中调接口的方式详解this.$api、直接调用、axios
这篇文章主要介绍了vue中调接口的方式：this.$api、直接调用、axios,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue组件传值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
随着前端的项目的越来越复杂,出现了一堆概念来降低开发的复杂性,单向数据流就是其中一个,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了Vue中使用插槽（slot）、聚类插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍了VsCode新建VueJs项目的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Vue3中当v-if和v-for同时使用时产生的问题和解决办法
封装一个组件时,我使用到了v-for和v-if,它们在同一标签内,总是提示v-for循环出来的item在实例中没有被定义,查询资料后原因是因为v-for和v-if在同级使用时,v-if优先级比v-for高,所以本文给大家介绍了Vue3中当v-if和v-for同时使用时产生的问题和解决办法2024-07-07
Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决
这篇文章主要介绍了Vue-cli3执行serve和build命令时nodejs内存溢出问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue中@click.stop与@click.prevent、@click.native使用
这篇文章主要介绍了Vue中@click.stop与@click.prevent、@click.native使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本篇文章主要介绍了在Vue中使用Compass的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论