
electron打包vue项目为exe问题记录(若依前后端分离vue2,亲测有效无坑版)
5.在electron-quick-start项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html(替换成我们的文件非常非常的重要,注意行数,一般都在16行多一点)7.运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件。(1).修改vue.
实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html,输入打包exe的命令即可。
1、 拉取electron官网上的demo,拉下来之后安装依赖,项目跑起来之后,就不用管demo了,开始配置自己的Vue项目
git clone https://github.com/electron/electron-quick-start //拉项目
npm i //进入项目安装依赖
npm run start //运行程序
2、vue项目相关修改
(1).修改vue.config.js,路径必须修改为 ./,不是这个后续打包好的页面可能会出现白屏,加载不出来的情况
module.exports = {
publicPath: './',
}
//若依项目里面是分环境,这边直接"./"不分环境
(2).打包自己的Vue项目(npm run build),将打包出来的 dist 文件夹复制到之前拉取的electron-quick-start文件夹中,和node_modules同级
3.在electron-quick-start项目中,下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
4.进入electron-quick-start项目,删除项目根目录下的 index.html 文件
5.在electron-quick-start项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html(替换成我们的文件非常非常的重要,注意行数,一般都在16行多一点)
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')*
//=========下面是可选部分
// 这段代码可以删除exe菜单栏
mainWindow.setMenu(null);
// 这段可以打开浏览器调试窗口
mainWindow.webContents.openDevTools();
6.在electron-quick-start项目中,进入 package.json ,在 scripts 中添加 packager 指令,如下所示:
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
//或者下面比较全 DR-文件名 icon-文件图标(必须为.ico格式才显示) out-输出文件夹 最后版本号等
"packager": "electron-packager ./ DR --platform=win32 --arch=x64 --icon=./dist/logo1.ico --out=./out --asar --app-version=0.0.2"
}
7.运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件
npm run packager
打包完以后,项目中会出现 App-win32-x64文件夹,进去之后,双击App.exe就可以访问了
上述转载并修改自
Vue项目打包成exe可执行文件(无瑕疵,完美版)
期间遇到的问题:
- 全局Cookies替换成localStorage
Cookies.get 改为 localStorage.getItem
Cookies.set 改为 localStorage.setItem
Cookies.remove 改为 localStorage.removeItem
- axios中的baseURL不分环境,直接写后台访问地址
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
// baseURL: process.env.VUE_APP_BASE_API,
baseURL: "http://127.0.0.1:8091/hm", // 直接写后台接口地址
// 超时
timeout: 10000,
});
- 路由中的模式history换成hash或者注释掉
export default new Router({
mode: "hash", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
});
- 修改vue-router版本(将原先的3.4.9改为3.0.7并且删除node_modules和package-lock.json重新 npm install,如果报错其他依赖则根据报错修改)
"dependencies": {
。。。
"vue-router": "3.0.7", //我将原先的3.4.9改为3.0.7
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
"devDependencies": {
。。。
"eslint": "^7.0.0", //我这边校验的依赖根据报错都升级了版本
"eslint-plugin-vue": "7.0.0",
},
// 防止连续点击多次路由报错
// let routerPush = Router.prototype.push;
// Router.prototype.push = function push(location) {
// return routerPush.call(this, location).catch((err) => err);
// };
//全局搜索 "LogOut",将location.href = "/index"改为this.$router.push("/login");
async logout() {
this.$confirm("确定注销并退出系统吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$store.dispatch("LogOut").then(() => {
//location.href = "/index";
this.$router.push('/login')
});
})
.catch(() => { });
},
美化exe左上角图标(在electron的package.json中添加)上面第5点设置了图标,此处可忽略不看:
"build": {
"appId": "001-AAA", // 程序包名
"copyright": "001", // 版权相关信息
"productName": "AAA", // 项目名字
"dmg": {
// "background": "res/background.png", // 背景图片的路径
"window": {
// 启动后窗口左上角位置
"x": 100,
"y": 100,
// 启动后窗口的大小
"width": 800,
"height": 500
}
},
"win": {
// 打包后的文件会有个图标,这个图标的路径,不指定的话默认的不好看
"icon": "res/logo.png"
}
附上图标png在线转ico格式网址
参考文章:
【前端问题记录】前端报错:Error: Cannot find module ‘@/views/index’
之后若要继续打包成安装包,可参考如下连接,测试有效:
更多推荐
所有评论(0)