vue打包exe实战记录

    vue项目不支持直接打包exe,可以依靠electron进行打包,处理方式是将vue打包的dist文件夹放到electron项目中,通过配置后打包electron.先看下本地环境

下面是实操记录:

1.vue项目打包

vue.config.js中设置项目路径为

module.exports = {
	//publicPath: '/chat_pc/',   // 前端项目部署路径
	publicPath: './',          // electron打包路径
}

打包命令:

npm run build

2.下载electron示例项目

git clone https://github.com/electron/electron-quick-start 

    如果出现下载不成功的情况可以自行创建electron项目,我这里已上传当时使用的electron示例项目:electron示例项目

    将vue项目打包后的dist文件夹放到electron的根目录
修改根目录main.js中内容:

 /* 修改后 */
 // mainWindow.loadFile('index.html')
  /* 修改后 */
  mainWindow.loadFile('./dist/index.html')

补充:
官网demo:
electron-quick-start

3.启动electron项目

按照以下命令操作:

// 国内网络下载electron可能很慢，建议设置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/


npm install
npm run start

执行npm install 报错:

command C:\Windows\system32\cmd.exe /d /s /c node install.js
npm ERR! HTTPError: Response code 404 (Not Found)

处理办法:

cnpm i electron --save-d

如果没有安装过cnpm需要安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行执行npm run start报错:

cnpm i electron --save-d

4.安装打包依赖

cnpm install electron-packager --save-dev

修改electron示例项目中package.json内容:

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ 应用名 --platform=win32 --arch=x64 --overwrite"//此处为添加的内容
} 

5.打包

 cnpm run packager

electron项目中添加了热部署,打包的时候可以注释掉,否者会提示electron-reloader找不到.

// 开启热加载 正式环境关闭
// const reloader = require('electron-reloader')
// reloader(module)

    重新打包时注意将生成的打包文件删除后重新执行以上命令,首次会慢,以后打包时间会快.我这边生成的exe文件是:

    注意:electron示例项目中的热部署部分需要注释,否则打包之后会提示找不到electron-reloader

// 开启热加载 正式环境打包时关闭
// const reloader = require('electron-reloader')
// reloader(module)