vue3+electron打包成桌面應用

自己記錄,vue3+electron打包成.exe桌面應用,部分代碼也是c來的,自己修改了一番,也算整合

記錄自己開發中的心得

前言

廢話不多說

一、vuecli打包之后修改公共請求地址

在public檔案夾下新建baseUrl.js檔案,寫如var baseurl = 'http://192.168.x.xx:8080/xx/'同級index.html中

 <script src="./baseUrl.js"></script>
  <script>
    sessionStorage.setItem("baseurl",baseurl);

存入快取中

二、封裝公共axios

依據個人習慣,在src目錄下新建utils檔案夾,新建http.js

 // http.js
import axios from 'axios'
import {
    ElLoading,
    ElMessage
} from 'element-plus';

//創建axios的一個實體 
//統一介面實體方法
var http = axios.create({
    baseURL: sessionStorage.getItem('baseurl'), //介面統一域名
    timeout: 10000, //設定超時
    transformRequest: [//轉換為formdata
        function (oldData) {
            let newStr = '';
            for (let item in oldData) {
                newStr += encodeURIComponent(item) + '=' + encodeURIComponent(oldData[item]) + '&'
            }
            newStr = newStr.slice(0, -1);
            return newStr
        }
    ],
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded;charset=UTF-8',
    }
})

//通用加載模態框
let loading;
//正在請求的數量
let requestCount = 0
//顯示loading
const showLoading = () => {
    requestCount++;
    loading = ElLoading.service({
        text: "請求資料中",
        background: 'rgba(0, 0, 0, 0.1)',
        spinner: 'el-icon-loading',
    })
}
//隱藏loading
const hideLoading = () => {
    requestCount--
    if (requestCount == 0) {
        loading.close()
    }
}

//請求攔截器 
http.interceptors.request.use((config) => {
    showLoading()
    // 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
    // const token = window.localStorage.getItem('token');
    // token && (config.headers.Authorization = token)
    return config;
}, (error) =>
    // 對請求錯誤做些什么
    Promise.reject(error));

//回應攔截器
http.interceptors.response.use((response) => {
    hideLoading()
    //回應成功
    // console.log('攔截器報錯');
    return response.data;
}, (error) => {
    console.log(error)
    //回應錯誤
    if (error.response && error.response.status) {
        const status = error.response.status
        let message = '';
        switch (status) {
            case 400:
                message = '請求錯誤';
                break;
            case 401:
                message = '請求錯誤';
                break;
            case 404:
                message = '請求地址出錯';
                break;
            case 408:
                message = '請求超時';
                break;
            case 500:
                message = '服務器內部錯誤!';
                break;
            case 501:
                message = '服務未實作!';
                break;
            case 502:
                message = '網關錯誤!';
                break;
            case 503:
                message = '服務不可用!';
                break;
            case 504:
                message = '網關超時!';
                break;
            case 505:
                message = 'HTTP版本不受支持';
                break;
            default:
                message = '請求失敗'
        }
        ElMessage.error(message);
        hideLoading()
        return Promise.reject(error);
    } else {
        ElMessage.error('連接服務器失敗');
        hideLoading()
    }
    return Promise.reject(error);
});

//匯出
export { http }

同級新建request.js

// http/axios.js
import { http } from "./http"
// import httpWeather from "./http"
/**
 * @param {String} method  請求的方法：get、post、delete、put
 * @param {String} url     請求的url:
 * @param {Object} data    請求的引數
 * @param {Object} config  請求的配置
 * @returns {Promise}     回傳一個promise物件，其實就相當于axios請求資料的回傳值
 */

const axios = ({
    method,
    url,
    data,
    config
}) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return http.post(url, data, { ...config })
    } else if (method == 'get') {
        return http.get(url, {
            params: data,
            ...config
        })
    } else if (method == 'delete') {
        return http.delete(url, {
            params: data,
            ...config
        })
    } else if (method == 'put') {
        return http.put(url, data, { ...config })
    } else {
        console.error('未知的method' + method)
        return false
    }
}
// export default axios


export { axios }

utils檔案夾同級新建apis檔案夾用來創建每個頁面的介面方法,在檔案下下新建如details.js

import { axios } from "../utils/request"

//提交修改方法
export const getPagesData = (data) => {
    return axios({
        url: 'monitorRecord/getMonitorRecordPage',
        method: 'post',
        data,
    })
}

在details.vue頁面參考

import { getPagesData } from "../apis/details";
getPagesData({
        pageSize: pageSize.value,
        currentPage: currentPage.value,
      }).then((res) => {
        tableData.value = res.page.list;
        count.value = res.page.count;
      });

至此,封裝axios完成

三、組件傳值

1.父組件(details.vue)

代碼如下（示例）：

引入
import v_setting from "../components/setting.vue";
--
申明
components: { v_setting, v_video },
--
使用
<v_setting
    @getSetting="getSettingData"
    :msg="showTags"
    v-show="showTagsNum == true"
    :class="[
      { animate__bounceInDown: showTags },
      { animate__bounceOutDown: !showTags },
    ]"
    class="showThem animate__animated"
  ></v_setting>
  --
  //獲取子組件資料
    const getSettingData = (data) => {
    這里可以獲取子組件傳來的資料
      setTimeout(() => {
        showTagsNum.value = data;
      }, 1000);
      showTags.value = !showTags.value;
    };

2.子組件(setting.vue)

代碼如下（示例）：

代碼不全,僅供參考

export default {
  props: {
    msg: Boolean,
  },
  setup(prpos, context) {
  --
  onMounted(() => {
  這里可以獲取父組件傳來的資訊
      outSatate.value = prpos.msg;
      if (localStorage.getItem("checkState")) {
        on.value = localStorage.getItem("checkState");
      }
    });
    --
    這里通過context.emit("方法名",引數)呼叫父組件方法使之獲取子組件的值
 const closeTag = () => {
      outSatate.value = false;
      context.emit("getSetting", false);
    };

至此,子父組件通訊完成

四、websocket通訊

utils檔案夾下新建websocket.js

import {
    ElMessage
} from 'element-plus';
let socket = null;
let lockReconnet = false;	//避免重復連接
const wsUrl = '';
let isReconnet = false;
let globalCallback = null;	//把要發送給socket的資料和處理socket回傳資料的回呼保存起來

let createSocket = url => {	//創建socket
    try {
        if ('WebSocket' in window) {
            socket = new WebSocket(url)
        }
        
        initSocket()
    } catch (e) {
        reconnet(url)
    }

}

let sendMsg = (data, callback) => {
    if (socket.readyState === 1) {
        globalCallback = callback;

        data = JSON.stringify(data);
        socket.send(data);
    } else {
        setTimeout(() => {
            // console.log(socket, '等待socket鏈接成功')
            sendMsg(data, callback)
        }, 5500)
        return false
    }
    socket.onmessage = ev => {
        callback && callback(ev)
    }


}

let initSocket = () => {	//初始化websocket
    socket.onopen = () => {
        if (socket.readyState === 1) {
            ElMessage({
                message: 'websocket連接成功',
                type: 'success'
            })
        }
        //heartCheck.reset().start()	//心跳檢測

        if (isReconnet) {//執行全域回呼函式
            //console.log('websocket重新連接了')
            sendMsg(globalCallback)
            isReconnet = false
        }
        // socket.send(JSON.stringify({
        //     "cmd": "SET_AREA",
        //     "monitorAreaNo": sessionStorage.getItem("area")
        // }))

    }

    // socket.onmessage = () => {
    //     // sessionStorage.setItem("", host);
    //     // console.log(ev,'連接正常')
    //     //heartCheck.reset().start()	//心跳檢測
    // }

    socket.onerror = () => {
        ElMessage({
            message: 'websocket連接出錯',
            type: 'error'
        })
        reconnet(wsUrl)
    }



    socket.onclose = () => {
        ElMessage({
            message: 'websocket連接關閉',
            type: 'error'
        })
        reconnet(wsUrl)
    }
}
let closeSocket = () => {	//發送資料,接收資料
    socket.close();
}
let getSocketState = () => {
    return socket.readyState
}
let reconnet = url => {	//重新連接websock函式
    if (lockReconnet)
        return false

    isReconnet = true;
    lockReconnet = true
    setTimeout(() => {
        createSocket(url)
        lockReconnet = false
    }, 2000)
}

// let heartCheck = {	//心跳檢測
// 	timeout: 60*1000,
// 	timeoutObj: null,
// 	serverTimeoutObj: null,
// 	reset(){
// 		clearTimeout(this.timeoutObj)
// 		clearTimeout(this.serverTimeoutObj)
// 		return this;
// 	},
// 	start(){
// 		let that = this;
// 		this.timeoutObj = setTimeout(()=>{
// 			//發送資料，如果onmessage能接收到資料，表示連接正常,然后在onmessage里面執行reset方法清除定時器
// 			socket.send('heart check')
// 			this.serverTimeoutObj = setTimeout(()=>{
// 				socket.close()
// 			},that.timeout)
// 		},this.timeout)
// 	}
// }



export { sendMsg, createSocket, closeSocket, getSocketState }

在頁面中使用

import { createSocket, getSocketState } from "../utils/websocket";
createSocket(sessionStorage.getItem("websocketurl"));
--
獲取當前socket狀態
SocketState.value = getSocketState();
--
import { sendMsg } from "../utils/websocket";
發送和接收socket訊息
sendMsg(
        {
          cmd: "SET_AREA",
          monitorAreaNo: areaId.value,
        },
        (ev) => {
          //有推送顯示提示
          if (JSON.parse(ev.data)) {
            //判斷用戶是否在操作或操作等待
            if (showVideo.value == true || isChangeState.value == true) {
              isHasTips.value = false;
              //提示用戶有新訊息
              ElNotification({
                title: "提示",
                message: "有新的錯誤提示,請回傳表格第一頁查看!",
                type: "warning",
              });
            } else {
              isHasTips.value = true;
            }
            tips_ydh.value = JSON.parse(ev.data).waybillNo;
            tips_time.value = changeToDateTime(JSON.parse(ev.data).gmtCreate);
            //呼叫分頁介面
            getPagesData({
              pageSize: pageSize.value,
              currentPage: currentPage.value,
            }).then((res) => {
              tableData.value = res.page.list;
              count.value = res.page.count;
            });
          }
        }
      );
      --
      import { closeSocket } from "../utils/websocket";
      --
      客戶端主動關閉通訊
      closeSocket();

至此,websocket已完成

五、打包.exe

專案安裝electeon

npm install electron

專案打包 npm run build
在打包完成后的dist檔案夾內新建main.js和package.js檔案
main.js

const { app, BrowserWindow } = require('electron');//引入electron

// 獲取可執行檔案位置
--開機自動啟動
const ex = process.execPath;
app.setLoginItemSettings({
  openAtLogin: true,
  path: ex,
  args: []
});





function createWindow() {
  win = new BrowserWindow({ show: false })
  win.on('ready-to-show', function () {
    win.show()
    win.maximize()
    // 初始化后再顯示
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {// dev環境
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
  } else {// 打包環境
    // createProtocol('app')
    win.loadURL(`file://${__dirname}/index.html`);
  }
  // win.loadURL(`file://${__dirname}/index.html`);//在視窗內要展示的內容index.html 就是打包生成的index.html
  // win.webContents.openDevTools();  //開啟除錯工具
  win.on('close', () => {
    //回收BrowserWindow物件
    win = null;
  });
  去除縮放頁面重新加載
  // win.on('resize', () => {
  //   // win.reload();
  // })
}
//托盤

app.on('ready', createWindow);
app.on('window-all-closed', () => {
  app.quit();
});
app.on('activate', () => {
  if (win == null) {
    createWindow();
  }

});

package.js

{
    "name": "yi-feng-video",
    "productName": "視頻預警",用戶看到的名稱
    "author": "xxx",
    "version": "1.8.14",--版本號
    "main": "main.js",
    "description": "xx科技視頻預警軟體",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.5",
        "win": {
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64"
                    ]
                }
            ],
            "icon": "./yf_video.ico"--可以使用破解版的icofx制作winico,放在dist目錄下
        },
        "appId": "YF-video",
        "artifactName": "xx科技-視頻預警-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "xx科技-視頻預警-${version}-${arch}.${ext}"
        },
        "extraResources": [
            {
                "from": "./static/xxxx/",
                "to": "app-server",
                "filter": [
                    "**/*"
                ]
            }
        ],
        "publish": [
            {
                "provider": "generic",
                "url": "http://xxxxx/download/"
            }
        ]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0",
        "electron-updater": "^4.0.0"
    },
    "devDependencies": {
        "electron-builder": "^22.11.7"
    }
}

然后cd dist

npm install electron-builder --save-dev

安裝完成之后直接在dist里執行

npm run dist

再在專案檔案夾中找到dist里面的dist里面的.exe檔案,這個就是我們需要的檔案,直接雙擊,發送給別人也只需要發送此.exe檔案
至此,打包已完成

六、vue3自適應

用來解決專案自適應呢

import { onMounted, ref, watch, toRaw } from "@vue/runtime-core";
let screenStyle = ref({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    });
    //監控螢屏解析度
    watch(screenStyle, {
      deep: true,
    });
    --onMounted
    window.onresize = () => {
        return (() => {
          screenStyle.value.width = document.documentElement.clientWidth;
          screenStyle.value.height = document.documentElement.clientHeight;
        })();
      };