electron套壳vue2项目
原创electron套壳vue2项目
原创
剧情回顾
最近lender提了个需求，说最近项目可能要变动一下，把网页端变成桌面端，小手一挥，博主就开始库库的找。奈何网上教程一大堆，但是没找到一个对版的，不是安装过程有错，就是执行命令过程失误。一个教程文章得搜五个报错文章，虽然最终我做出来噜，但是很费劲，所以这篇用来总结一下。
PS：基本上你遇到的坑不会比我多了，如果有问题直接贴在评论区，我要是解决不了那就是解决不了(狗头)
electron安装
首先新建一个vue项目，在选项中选择vue2，按默认配置生成。如果在生成过程中出现错误中断，请先删除 node_modules 文件夹，不用再安装，因为后续会再装
PS：如果你是老项目，请无视上面这一步，直接把 node_modules 文件夹删除。
vue create electron-vue接着在项目根目录下创建 background.js 并输入如下内容，调整electron应用程序大小及打包形式
const { app, BrowserWindow, screen, ipcMain, nativeTheme } = require('electron')
const path = require('path')
// 热加载
try {
require('electron-reloader')(module,{});
} catch (_) {}
const createWindow = () => {
const win = new BrowserWindow({
width: screen.getPrimaryDisplay().workAreaSize.width, // 直接显示最宽窗口，非最大化
height: screen.getPrimaryDisplay().workAreaSize.height, // 直接显示最高窗口，非最大化
})
// 判断当前环境
if (process.env.NODE_ENV === 'development') {
win.webContents.openDevTools() // 自动打开工作台
win.loadURL('http://localhost:8080') // 加载本地服务地址
} else {
win.loadFile('./dist/index.html') // 加载打包后的静态页面
}
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})然后调整package.json为如下内容，增加作者、描述、运行命令、electron的各种包等
PS：老项目复制main、electron包、命令、cross-env等部分，如果没author和description记得补充
{
"name": "electron-vue",
"version": "0.1.0",
"private": true,
"main": "background.js", // 刚才创建的background.js
"description": "this is test vue and electron project", // 必须有不然electron打包会报错
"author": "GuoWei-Liu", // 必须有不然electron打包会报错
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
"dependencies": {
"core-js": "^3.6.5",
"electron-squirrel-startup": "^1.0.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@electron-forge/cli": "^6.4.2",
"@electron-forge/maker-deb": "^6.4.2",
"@electron-forge/maker-rpm": "^6.4.2",
"@electron-forge/maker-squirrel": "^6.4.2",
"@electron-forge/maker-zip": "^6.4.2",
"@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.2",
"electron": "^24.8.8",
"electron-reloader": "^1.2.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}接着运行 npm i 指令，安装electron所需要的包
安装期间如果报出问题<font color=red> Error: certificate has expired</font> 这种报错，一般有以下两种情况：
1.使用 cnpm 的，最近淘宝镜像有点问题，请执行npm并切换源 npm config set registry https://registry.npmmirror.com
2.安全证书不安全导致的，请执行 set NODE_TLS_REJECT_UNAUTHORIZED=0 暂时禁用验证
npm ielectron配置
安装完成后，我们要在在命令行执行 npx electron-forge import 生成electron-forge的配置文件
npx electron-forge import生成的文件名为 forge.config.js ，内容如下：
module.exports = {
packagerConfig: {
asar: true,
},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
plugins: [
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {},
},
],
};接着回到 package.json ，根据环境变量调整start和make命令，此调整一定要在npx后调整，因为electron-forge会进行命令覆盖
……
"start": "cross-env NODE_ENV=development electron-forge start",
"make": "cross-env NODE_ENV=production electron-forge make"
……开发环境运行
首先打开两个命令行，先在命令行1中执行 npm run dev 命令，等待vue服务器打开
这里注意，要确定好本地服务器的地址，一定要与 background.js 里 loadURL 函数的地址对上
npm run dev
……
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.20.103:8080/
Note that the development build is not optimized.
To create a production build, run npm run build. 服务器打开后，在在命令行2中执行 npm run start 命令开启应用，效果图如下所示
npm run start
生产环境打包
和开发环境一样，打开两个命令行，先在命令行1中执行 npm run build 命令，等待文件打包完成
<font color=red>这里重点注意几点！！很多小坑：</font>
1.将 vue.config.js 文件里的 publicPath 字段默认值改为 ./，不然会出现打包完成后页面空白现象。
2.使用了axios需要调整baseURL字段，改为服务器接口地址，不然默认打包完访问的api地址是file:///
3.使用了router需要把mode字段改为hash，要不路由会失效
4.使用了cookie需要改一下编码逻辑，可以用localStorage，不然在应用程序里面不识别。
5.确定好打包的位置，一定要要与 background.js 里 loadFile 函数的地址对上。
npm run build打包完成后，在命令行2中执行 npm run make 命令，将vue打包成应用程序。打包成功的应用程序可以在 out/electron-vue-win32-x64/electron-vue.exe 点击查看，效果图如下
npm run make
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。