欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue项目打包成.exe文件放在桌面的快捷打开方式,用electron实现

程序员文章站 2022-06-04 15:16:26
...

首先到electron官网或者GitHub上下载一个模板electron-quick-start

复制下面地址就可clone了
Git地址:git clone https://github.com/electron/electron-quick-start

进入到electron-quick-start文件中

cd electron-quick-start (或者直接打开文件)

安装依赖

npm start 跑起来就能看到官方demo(不用跑)

看看electron-quick-start中的入口文件main.js, 以下是createWindow函数中的部分:

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({
	    width: 800, // 窗口的宽度
	    height: 600, // 窗口高度
	    webPreferences: {
	    	nodeIntegration: true
	    }
    })
    // and load the index.html of the app.
    mainWindow.loadFile('index.html') // 设置入口页面
    "electron_build": "electron-packager ./dist/ 快钱查询 --platform=win32 --arch=x64 --icon=./src/assets/kq.ico --overwrite" // 就是这一句命令
},

对于"electron_build"这条命令的介绍如下:

electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

1.sourcedir 资源路径,在本例中既是./dist/
2.appname 打包出的exe名称
3.platform 平台名称(windowswin32
4.arch 版本,本例为x64

此时来打包vue项目(也可以一开始就打包)

cnpm run build

在打包后的dist文件夹中增加electron.jspackage.json

这个electron.js与刚刚build文件夹下的electron.js一样,不过入口页面路径应该改为相对于当前文件的路径。即:

mainWindow.loadURL(url.format({ 
    pathname: path.join(__dirname, 'index.html'), //注意此处 
    protocol: 'file:', slashes: true 
}))

这个package.json与最开始electron-quick-start项目中的package.json文件一致,不过里面的main应该指向从build文件夹中的electron.js。即:

{
  "name": "RFID",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",// 注意此处(如果之前没改名这里就不用改名)
  "scripts": {
    "start": "electron ."
  },
}

最后就在vue项目中开始打包,运行之前设置的命令

npm run electron_build

如果打包后在本地打不开exe文件或者报错,那一定是
因为静态资源路径的问题。现在打开项目,我们修改一下路径。
第一步,将vue config下面index.js里面截图部分路径‘/’改为‘./’,

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',

assetsPublicPath: './', // 改这里

重新打包好之后,我们在打开本地资源,这时我又发现一个新的问题,页面打开仍然是空白,但是控制台已经不报错了,哇,很难受,在半个小时后最终知道了问题所在,是因为路由的问题 坑啊!!!
接下来我们打开vuerouter文件夹下的index.js文件,我的是这个,
如下,脚手架搭建的项目,默认这块的值是History ,我们需要将History 改为hash。因为默认的他无法渲染页面。

export default new Router({
    // mode: 'history', // 后端支持可开
    mode: 'hash', // 在本地打开
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

修改好后重新进行vue打包: cnpm run build
vue打包好后再运行cnpm run electron_build

此时在你的vue项目中多出了一个类似 (快钱查询-win32-x64)的文件夹,
此时你即刻打开它将里面的exe文件发送到桌面就可以了.