前言
帮公司弄了一个vue+electron项目，里面用到了axios、element-ui、ue-router、js-md5、sqlite3这些依赖库，其中sqlite3比较难搞下面会详细展开来讲，同时也涉及打包（window包、mac包）
开始
其实项目整体没啥好讲，我就讲一下数据库的封装、打包配置注意事项即可
sqlite3数据库使用
ps: 你要有python2.7版本
npm install sqlite3 --save具体安装步骤你可以百度或者参考这篇文章
安装完成之后，你还要配置来到vue.config.js文件，开启node环境
module.exports = {pluginOptions:{electronBuilder:{nodeIntegration:true}}
}简单封装的db.js
时间戳小技巧main.js
Date.prototype.Format = function (fmt) {var o = {"M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 };if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;
}let sqlite3 = require('sqlite3').verbose();
const path = require('path');
let basePath = process.env.NODE_ENV !== 'development' ? path.dirname(process.execPath) : process.cwd();
let dbPath = path.join(basePath, '/dataBase/table.db');
console.log('数据库路径: ', dbPath);
const db = new sqlite3.Database(dbPath);// 启动软件时判断是否有db文件，没有就创建db文件，同时创建表...看个人需求自行完成// db.all("select * from province_list", (err, res) => {
// console.log(JSON.stringify(res))
// })export default db// 使用1
// 1.main.js 引入注册
import db from './db'
Vue.prototype.$db = db// 2.index.vue文件使用
this.$db.all("select * from province_list", (err, res) => {console.log(JSON.stringify(res))
})// 使用2
// 1.index.vue文件使用
import modelHome from '/db/api/home'
modelHome.test()
// 2./db/aip/home/index.jsimport db from '../db'
test() {return new Promise((resolve, reject) => {db.all("select * from task_list", (err, res) => {// console.log(res)if (err) {reject(err);} else {resolve(res);}})})},__addTask(item) {item.update_time = new Date().Format("yyyy/MM/dd hh:mm:ss")item.crate_time = new Date().Format("yyyy/MM/dd hh:mm:ss")return new Promise((resolve, reject) => {db.all(`INSERT INTO task_list VALUES (NULL, "${item.name}", "${item.linkUrl}", "${item.ua_type}", "${item.plan_open_num}", "${item.window_num}", '${item.proxy_config}',"${item.update_time}", "${item.crate_time}")`, (err, res) => {if (err) {reject(err)} else {resolve(res)}})})},__updateTask(item) {item.update_time = new Date().Format("yyyy/MM/dd hh:mm:ss")return new Promise((resolve, reject) => {db.all(`UPDATE task_list SET name="${item.name}", linkUrl="${item.linkUrl}", ua_type="${item.ua_type}", plan_open_num="${item.plan_open_num}", window_num="${item.window_num}", proxy_config='${item.proxy_config}', update_time="${item.update_time}" WHERE id="${item.id}"`, (err, res) => {if (err) {reject(err)} else {resolve(res)}})})},__dateltTask(item) {return new Promise((resolve, reject) => {db.all(`DELETE FROM task_list WHERE id="${item.id}"`, (err, res) => {if (err) {reject(err)} else {resolve(res)}})})},数据库知识我们就讲完了，注意点如果你没有自动生成db文件，你打包之后需要手动复制db文件到安装软件的目录里面。
打包
1.隐藏help、file这些菜单
src/background.js
import { app, protocol, BrowserWindow, Menu } from 'electron'app.on('ready', async () => {createWindow()// 隐藏菜单栏Menu.setApplicationMenu(null);
})2.修改窗口标题名
public/index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- <title><%= htmlWebpackPlugin.options.title %></title> --><title>测试标题名</title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>
3.打包配置修改各种东西
vue.config.js
module.exports = {pluginOptions:{electronBuilder:{nodeIntegration:true,// 打包配置参数builderOptions: {productName: "测试应用", // 应用的名称appId: 'www.xxx.com', // 项目唯一标识copyright: 'Copyright © xxx',directories: {output: "build_electron" // 输出文件夹},electronDownload: {mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置},win: {icon: './src/assets/logo.ico', //打包windows版本的logotarget: [{target: 'nsis', // 利用nsis制作安装程序'arch': ['x64', // 64位'ia32']}]},nsis: {oneClick: false, // 一键安装perMachine: true, // 是否开启安装时权限限制（此电脑或当前用户）allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。allowToChangeInstallationDirectory: true, // 允许修改安装目录installerIcon: "./src/assets/logo.ico", // 安装图标installerHeaderIcon: "./src/assets/logo.ico", // 安装时头部图标uninstallerIcon: "./src/assets/logo.ico", // 卸载图标createDesktopShortcut: true, // 创建桌面图标createStartMenuShortcut: true, // 创建开始菜单图标},}},}
}
4.打包window包和mac包
package.json
"scripts": {"e:build:mac": "vue-cli-service electron:build --mac","e:build": "vue-cli-service electron:build","e:serve": "vue-cli-service electron:serve"}npm run e:build
// window包
npm run e:build:mac
// mac包注意mac包需要在mac电脑才能打，同时第一次打包的时候需要开启科学上网（它会自动下载electron-builder依赖），第一次打包成功之后 第二次就会快很多。
总结
1.sqlite3数据库安装、使用
2.打包配置，注意点就是要开启科学上网
![[golang 流媒体在线直播系统] 4.真实RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播](http://pic.xiahunao.cn/[golang 流媒体在线直播系统] 4.真实RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播)
