Vue3+Electron踩坑記錄

前言

剛開始使用 vue3 的時候，總是會帶著點 vue2 的思想殘留，被 vue2 中的 this 所支配。不自覺地習慣性使用 this ，開發環境是不報錯的，編譯打包後才報錯。所以，在 vue3 中使用 this ，是巨坑。

Vue3中this的替代方案、以及使用ctx打包後指向錯誤

setup 在生命週期 beforecreate 和 created 前執行，此時 vue 例項物件還未建立，因此無法使用我們在 vue2。x 中常用的 this。解決辦法是呼叫 vue 中的 getCurrentInstance（）方法返回上下文，即當前例項。

vue3使用ctx樣例

import {getCurrentInstance，onMounted } from “vue”；export default { setup（） { const { ctx } = getCurrentInstance（）； //獲取上下文例項，ctx=vue2的this onMounted（（） => { console。log（ctx， “ctx”）； ctx。http（）； }）； }，}；

ctx 在開發環境下展開的結果，看起來似乎一切正常。

但專案打包編譯後執行，報錯。

http（）方法執行報錯，再展開 ctx 的列印結果來比較。

與開發環境下的ctx完全不同。

Vue3的this替代方案：使用proxy

在結構的時候直接將proxy結構出來，但還是建議放棄使用“this”當前例項操作的方式。

import {getCurrentInstance，onMounted } from “vue”；export default { setup（） { const { proxy， ctx } = getCurrentInstance（） //獲取上下文例項，ctx=vue2的this onMounted（（） => { console。log（proxy， “proxy”）； proxy。http（）； }）； }，}；

開機啟動許可權設定

在登錄檔正確寫入的情況下，設定了 electronBuilder 下 requestedExecutionLevel 的最高許可權。requireAdministrator 依然不能正常開機自動啟動程式。把這行程式碼註釋掉，就能正常開機自動啟動程式，具體原因還在探究。