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、你已经成功了,撒花
总结
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。