要将Vue项目打包为可安装程序(.exe),我们可以使用Electron框架。Electron允许你使用Web技术(如Vue、HTML和CSS)创建跨平台的桌面应用程序。
一、下载模板electron-quick-start
git仓库下载地址
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
安装成功显示
安装依赖可能会报错,解决方案
先清一下缓存:npm cache clean --force
设置一下镜像源:npm config set registry https://registry.npm.taobao.org
原来没有设置过的,设置镜像地址:npm config set disturl https://npm.taobao.org/dist
设置electron镜像:npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
设置electron镜像:npm config set electron_mirror https://npm.taobao.org/mirrors/electron/报错加不进去直接找到.npmrc文件打开
粘贴进去
electron_mirror=https://npm.taobao.org/mirrors/electron/
二、修改要打包的vue文件配置并打包
找到vue.config.js 配置文件
// vue.config.js
module.exports = {
publicPath: "./",
}
有些情况下还要修改路由配置页面(我的修改了vue.config.js文件打包后直接访问dist/index.html页面空白,css,js文件也没有报路径错误)
然后把vue项目打包成dist文件
三、配置 electron-quick-start
删除 electron-quick-start 根目录下的 index.html 文件,
将vue项目打包的dist文件放入到electron-quick-start文件下
在electron-quick-start项目下安装打包需要的依赖electr-packager
npm install electron-packager --save-dev
修改electron-quick-start项目下main.js文件配置
此处有几个属性分别配置exe文件的窗口大小,以及关闭按钮禁用和是否去掉窗口的边框
别急,还有一步。进入package.json,在script中添加packager指令
最后用指令打包
我们要的exe文件