vue打包exe

最新推荐文章于 2024-04-15 17:45:47 发布

H30919

最新推荐文章于 2024-04-15 17:45:47 发布

阅读量406

点赞数

文章标签： vue.js javascript 前端 electron

本文链接：https://blog.csdn.net/H30919/article/details/129028875

版权

vue项目打包exe文件

拉取electron官网上的demo，拉下来之后安装依赖

git clone https://github.com/electron/electron-quick-start
npm i  // 或者cnpm i

打开自己的项目，安装依赖

npm install electron --save-dev //安装electron
npm install electron-packager --save-dev // 安装打包exe工具

修改自己项目的vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true
})

自定义自己项目的package.json

在这里插入图片描述

想要自定义下图位置的图标，需在public文件下复制一个.ico（必须是ico格式）格式的图标文件。(还需要结合electron-quick-start项目的 package.json，这在后面会说到 )

在这里插入图片描述

想要自定义下图位置的图标，须在自己项目的public文件夹下的index.html进行设置

<!DOCTYPE html>
<html lang="">
  <head>
        <link rel="icon" href="<%= BASE_URL %>icon.ico">
  </head>
  </body>
</html>

在这里插入图片描述

打包自己的项目，生成dist文件，点击dist文件在explore中打开，复制dist文件

npm run build

将复制的dist文件粘贴到electron-quick-start中（注意dist的位置）

在这里插入图片描述

进入electron-quick-start项目，删除项目根目录下的自带的 index.html 文件
在electron-quick-start项目中找到 main.js ，修改打包的文件路径为我们的index.html

// main.js 默认内容 
mainWindow.loadFile('index.html') 
// 自定义内容 
mainWindow.loadFile('./dist/index.html')*

设置electron-quick-start项目的 package.json

{
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ 智能机器人调度控制系统 --platform=win32 --arch=x64 --icon=./dist/icon.ico --overwrite"
  }
}

在electron-quick-start目录下运行npm run packager ，就会出现一个智能机器人调度控制系统的文件（第一次执行需要从外网下载东西，很慢，可以爬梯子，在软件里打开CMD，再执行npm run packager），打开它文件夹，执行里面的.exe文件即可运行

H30919

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue打包exe

vue打包exe
复制链接

扫一扫

vue打包exe

vue项目打包exe文件

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