Vue项目打包成.exe文件放在桌面的快捷打开方式,用electron实现
首先到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
平台名称(windows
是win32
)
4.arch
版本,本例为x64
此时来打包vue项目(也可以一开始就打包)
cnpm run build
在打包后的dist
文件夹中增加electron.js
和package.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: './', // 改这里
重新打包好之后,我们在打开本地资源,这时我又发现一个新的问题,页面打开仍然是空白,但是控制台已经不报错了,哇,很难受,在半个小时后最终知道了问题所在,是因为路由的问题 坑啊!!!
接下来我们打开vue
的router
文件夹下的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
文件发送到桌面就可以了.