公司提出来一个需求,要把vue项目变成桌面应用,面对这样的需求,我也是小白一个,看啦100多帖子,没找到一个是可以按照步骤直接成功的。
今天自己总结啦一个线上版本的。
第一步—拉官方代码,安装依赖。
1、git clone https://github.com/electron/electron-quick-start
2、打开拉下来的代码
3、npm install
第二步–找到你们项目部署在nginx的地址
第三步–修改官方代码下main.js中的加载文件的路径
mainWindow.loadFile('index.html') // 默认的请求路径修改一下
mainWindow.loadURL('http://+nginx中的地址')//修改后的
mainWindow.loadURL('http://192.168.200.2')//修改后的例子
修改好之后
npm start //启动命令
启动一下看一下项目是否可以启动。
第五步–打包
在package.json文件中配置打包命令找到scripts直接覆盖
"scripts": {
"start": "electron .",
"build:mac": "electron-packager . 应用名字 vue-objccn --platform=darwin --out ./dist/$npm_package_version --overwrite --icon=logo.icns --ignore=node_modules/* --ignore=.git --ignore=dist/$npm_package_version",
"build:win": " electron-packager . 应用名字 vue-objccn --platform=win32 --out ./dist/$npm_package_version --overwrite --ignore=node_modules/* --ignore=.git --ignore=dist/$npm_package_version"
},
两个命令一个苹果系统的,一个window系统的。还需要其他的去搜索一下就可以拉。不过有个巨坑。打包必须要匹配系统,对应系统只能打相对应系统的包(苹果系统只能打苹果的包,打window的会报错),如果想要跨系统,还需要下载其他的插件。目前我还没有找到好用的。。。。
打包命令
npm run build:mac //mac版本
npm run build:win //window版本