vue項(xiàng)目打包成桌面快捷方式(electron)的方法
網(wǎng)上有很多相關(guān)的例子了,所以我只是把自己的問題記錄一下。
1.把electron的官方例子clone下來
git clone https://github.com/electron/electron-quick-start
2.進(jìn)入項(xiàng)目,輸入以下命令,運(yùn)行項(xiàng)目
npm install//下載依賴包 npm start//啟動(dòng)
3.彈出界面
4.接下來將自己的vue項(xiàng)目打包,運(yùn)行npm run build
5.將打包的項(xiàng)目復(fù)制到electron-quick-start的根目錄
6.重新運(yùn)行一下
npm start
如果頁面能打開,則說明沒問題。
如果頁面打不開,點(diǎn)擊view底下的Toggle Developer Tools,然后點(diǎn)擊f12,打開調(diào)試工具查看問題。
錯(cuò)誤1
解決1
因?yàn)槲沂莢ue3加vite構(gòu)建,所以找到項(xiàng)目中vite.config.js,修改文件,
base: ‘./’,是關(guān)鍵,其他的根據(jù)自己項(xiàng)目需要改。
import { defineConfig } from 'vite' import { resolve } from 'path' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' function pathResolve(dir) { return resolve(process.cwd(), '.', dir) } // https://vitejs.dev/config/ export default defineConfig({ base: './', // 為了electron 從/ 改成./這個(gè)是關(guān)鍵 plugins: [vue(), vueJsx()], resolve: { alias: { // @/xxxx => src/xxxx '@': pathResolve('src') } }, optimizeDeps: { include: ['axios'] }, server: { host: true, port: 3000, proxy: { '/api': { target: 'http://192.168.0.118:11499', rewrite: path => path.replace(/^\/api/, '') } } }, build: { minify: 'terser', terserOptions: { compress: { drop_console: true, // 打包時(shí)移除 console drop_debugger: true // 打包時(shí)移除 debugger } } } })
修改完畢后發(fā)現(xiàn)還有錯(cuò)誤 C:///file…像這個(gè)樣子,然后就這個(gè)問題我找了好長(zhǎng)時(shí)間,因?yàn)槲翼?xiàng)目有fect和axios讀本地文件,打包后找不到這些文件,修改的方法也很簡(jiǎn)單,在讀取的文件前加./
像這個(gè)樣子
然后vue項(xiàng)目重新打包,重復(fù)之前的操作。
頁面能打開則進(jìn)行第七步
7.打包成快捷方式
(1)安裝electron-packager打包依賴
npm install electron-packager --save-dev
(2)在package.json中增加一條命令(注意,這個(gè)是在electron-quick-start文件里的package.json加)
"scripts": { "start": "electron .", "packager": "electron-packager . ang-1580 --platform=win32 --arch=x64 --icon=./favicon.ico --out=./app --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 19.0.2" },
(3)打包命令
npm packager
此時(shí)項(xiàng)目應(yīng)該有應(yīng)該app文件夾
有一個(gè)應(yīng)用程序,雙擊打開就可以了,然后鼠標(biāo)右鍵創(chuàng)建快捷方式,發(fā)送到桌面就可以了。
到此這篇關(guān)于vue項(xiàng)目打包成桌面快捷方式(electron)的方法的文章就介紹到這了,更多相關(guān)vue項(xiàng)目打包成electron內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue配置electron使用electron-builder進(jìn)行打包的操作方法
- vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
- 使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
- 如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
- 解決electron打包vue-element-admin項(xiàng)目頁面無法跳轉(zhuǎn)的問題小結(jié)
- vue項(xiàng)目使用electron進(jìn)行打包操作的全過程
- 手把手教你使用electron將vue項(xiàng)目打包成exe
- 關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
- 用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決
- vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置方法
相關(guān)文章
el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例
這篇文章主要為大家介紹了公共Hooks封裝useTableData表格數(shù)據(jù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟
這篇文章主要介紹了vue 使用rules對(duì)表單字段進(jìn)行校驗(yàn)的步驟,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-12-12Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)騰訊云點(diǎn)播視頻上傳功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料,以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11