electron-vue項目打包踩坑指南

  配置vue

"build": { "productName":"xxxx",//項目名 這也是生成的exe文件的前綴名 "appId": "com.leon.xxxxx",//包名  "copyright":"xxxx",//版權 信息 "directories": { // 輸出文件夾 "output": "build" }, "nsis": { "oneClick": false, // 是否一鍵安裝 "allowElevation": true, // 容許請求提高。 若是爲false,則用戶必須使用提高的權限從新啓動安裝程序。 "allowToChangeInstallationDirectory": true, // 容許修改安裝目錄 "installerIcon": "./build/icons/aaa.ico",// 安裝圖標 "uninstallerIcon": "./build/icons/bbb.ico",//卸載圖標 "installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖標 "createDesktopShortcut": true, // 建立桌面圖標 "createStartMenuShortcut": true,// 建立開始菜單圖標 "shortcutName": "xxxx", // 圖標名稱 "include": "build/script/installer.nsh", // 包含的自定義nsis腳本  }, "publish": [ { "provider": "generic", // 服務器提供商 也能夠是GitHub等等 "url": "http://xxxxx/" // 服務器地址  } ], "files": [ "dist/electron/**/*" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": { "icon": "build/icons" } }

一、路徑中不要有中文node

二、NPM下載的問題linux

  由於NPM在國內比較慢。致使electron-V.xxxx.zip下載失敗。這些東西若是是第一次打包的話是須要下載對應electron版本的支持文件。解決辦法有兩個webpack

(1)設置鏡像:在build裏面加下面一段代碼git

"electronDownload": { "mirror": "https://npm.taobao.org/mirrors/electron/" }

(2)直接下載後放入C盤(採用的這種)github

  直接去淘寶鏡像文件庫找到對應的文件並下載,放到指定的目錄下,electron的淘寶鏡像地址https://npm.taobao.org/mirrors/electron/。下載完以後放到指定的文件。通常文件的地址在C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下載8.2.3版本的electron,那麼找到鏡像下得文件而後放到指定文件夾中。web

 (3)NSIS下載問題npm

  若是你要打NSIS的包還須要再下載nsis-resources-xxx等等包。經過錯誤日誌咱們能夠獲得咱們要下載得版本,通常錯誤中一般會展現github下載地址,直接點開鏈接去下載。可是位置此次不同了。由於這是electron-builder的支持環境因此咱們要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis\下了。sass

  通常狀況下解決這些問題的思路就是,缺什麼拿什麼?。服務器

 三、node-sass問題

  安裝vs2017必須裝C++模塊,安裝後從新下載node-sass

四、static/下資源沒法加載問題

  在開發和產品階段static的路徑是不一致的。這裏官方提供了一個__static的全局變量 (兩個下劃線開頭),能夠用來替代須要static的地方

  若是dev或者web環境下__static變量解析不正確,只須要自行修改對應運行環境下的__static變量值就好了,例如dev環境下的__static應該改成:

//.electron-vue/webpack.renderer.config.js if (process.env.NODE_ENV !== 'production') { //非最終產品環境,這裏即爲dev環境  rendererConfig.plugins.push( new webpack.DefinePlugin({ // '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` '__static': JSON.stringify('./static') }) ) }

  參考:https://blog.csdn.net/weixin_43103477/article/details/82259381?utm_source=blogxgwz3

 五、打包後顯示調試工具

  mainWindow.webContents.openDevTools()

相關文章
相關標籤/搜索