當前位置：首頁 > 前端技术 > vue >内容正文

vue

electron 打包_Vue3+Electron整合方式

發布時間：2023/12/10 vue 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 electron 打包_Vue3+Electron整合方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

教程源碼：

nofacer/vue3-electron?github.com

之前寫過一篇文章Vue結合Electron構建跨平臺應用（TDD）。當時的方法后來發現了一個問題，就是打包后的應用拿到其他機子上沒法用，原因在于index.html的地址是個絕對路徑，在打包的時候就被固定下來了。

在查閱了許多資料后發現之前將二者結合的方法不是很有效(開發和生產環境不一致等)，正好Vue3也進入beta階段了，因此想借著這個機會重新梳理一下這個話題。打算不借助各種快捷生成項目的cli從零將二者有機結合起來，這樣可以加深對各種構建工具的了解。

涉及內容：

Vue
Electron
Webpack
Scss

安裝Webpack

新建./index.html

這里通過script src的方式導入了lodash，為了后面測試webpack能否正常工作。新建./index.js

用瀏覽器打開index.html，不出意外應該能看到Hello webpack頁面。運行npm install -D lodash在本地安裝lodash。修改./index.js，通過包引入lodash。

新建./webpack.config.js來配置webpack的行為。

運行npx webpack，正常情況應該在./dist/bundle.js中有我們所有的js內容。將./index.html的內容修改為

在瀏覽器中打開看到的應該是和之前一樣的界面。說明webpack正常工作了。

安裝Vue3

vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs)

修改./index.js，新建一個vue應用。

新建./App.vue

再新建個src/components/HelloWorld.vue

最后再在./index.html的<body>中加一個<div id="app"></div>

./node_modules/.bin/webpack --config webpack.config.js后在瀏覽器中打開index.html，應該可以看到“Welcome to Your Vue.js App”幾個大字。

引入樣式（Scss）

到目前為止，我們的應用還沒有設定什么樣式，接下來我們看看樣式怎么被一起打包。

https://vue-loader.vuejs.org/guide/pre-processors.html

在src/components/HelloWorld.vue的末尾加上一點樣式

這時候build是會報錯的

You may need an additional loader to handle the result of these loaders. | > $nav-color: #F90; | h1{ | color: $nav-color;

我們需要安裝一點東西npm install -D style-loader sass-loader node-sass css-loader。之后修改./webpack.config.js

build后打開網頁，文字應該變成了橙色。這種方式是通過single-file component的形式添加的樣式，接下來我們再通過import external scss文件的形式添加樣式。新建./src/style/common.scss

在./index.js里加入scss文件

到目前為止，最終的網頁看起來應該像這樣：

引入圖片資源

圖片也可以被當成模塊利用webpack打包，后期管理資源路徑比較方便。修改HelloWorld.vue的template

在webpack.config的rules中加上

Babel

因為我們用的都是最新的Electron，瀏覽器內核都比較新，新的JS特性也都支持，就不安裝Babel了。

安裝Electron

重頭戲終于來了。npm i -D electron@latest安裝最新的electron。新建./main.js作為electron的入口文件。

由于增加了main文件作為Electron的入口，再加上index文件作為Vue的入口，現在一共兩個入口，需要修改entry配置。同時，我們需要在配置中指定打包應用類型，將target設置為electron-renderer。修改后如下：

修改package.json中的"main": "./dist/main.js"。scripts中加一個"start": "electron ."。npm run build后npm run start應該可以看到electron app成功啟動。

Publish配置

如果要打包應用還有些東西要調整。安裝npm i -D electron-builder。在package.json中加入

Then you can run yarn dist (to package in a distributable format (e.g. dmg, windows installer, deb package)) or yarn pack (only generates the package directory without really packaging it. This is useful for testing purposes).

為了確保所有依賴都匹配electron的版本，再在package.json中加入"postinstall": "electron-builder install-app-deps" 增加build的配置，將dist文件夾和index.html包含進去，打包輸出路徑為package。最終的package.json應該長這樣

運行npm run dist看看能不能打包成功。

微調下樣式，最終的效果應該是這樣

后話

目前的配置只適合作為Demo，更詳細的配置請移步Github。順便記得點個哦～