您的位置 首页 > 数码极客

如何把vue封装成app

我有个模版项目是用vue-cli3.x开发的,测试部署已经没问题,突发奇想,能不能打包成exe文件,在桌面运行,开始鼓捣。

1.先将项目打包

yarn build

2.安装electron和electron-packager

yarn add electronyarn add electron-packager

3.dist目录新建main.js文件,内容如下:

const { app, BrowserWindow, Menu } = require('electron') function createWindow() { // 去掉菜单 Menu.setApplicationMenu(null) // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 并且为你的应用加载index.html win.loadFile('index.html') // 打开开发者工具 // win.webCon() } // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。 a().then(createWindow) //当所有窗口都被关闭后退出 a('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if !== 'darwin') { a() } }) a('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if ().length === 0) { createWindow() } }) // 您可以把应用程序其他的流程写在在此文件中 // 代码 也可以拆分成几个文件,然后用 require 导入。

注:可以从electron官网clone例子,复制main.js

4.dist目录新建文件,内容如下:

{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=com --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules" }, "repository": ";, "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "^9.0.0" }, "dependencies": { "electron-packager": "^14.2.1" } }

注:可以从electron官网clone例子,复制

5.在项目的根目录的增加一条启动命令

"scripts": { "serve": "vue-cli-service serve --copy", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron_dev": "yarn build && electron main.js", "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --overwrite" },

注:

  • sourcedir: 资源(dist/)路径,在本例中既是./dist/
  • appname:打包出的exe名称,这里取名为helloworld
  • platform :平台名称(windows是win32)
  • arch: 版本,本例为x64

6.生成exe

yarn electron_build

可以看到项目目录中多了一个helloworld-win32-x64文件,找到里面的运行即可。

运行效果

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何把vue封装成app”边界阅读