electron-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"
    }
  }

 

一、路徑中有中文（建議不要用中文）

 

 

 二、NPM下載的問題

因為NPM在國內比較慢。導致electron-V.xxxx.zip下載失敗。這些東西如果是第一次打包的話是需要下載對應electron版本的支持文件。解決辦法有兩個

1、設置鏡像：在build里面加下面一段代碼

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

2、直接下載后放入C盤（采用的這種）

接去淘寶鏡像文件庫找到對應的文件並下載，放到指定的目錄下，electron的淘寶鏡像地址：https://npm.taobao.org/mirrors/electron/。下載完之后放到指定的文件。一般文件得地址在C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下載8.2.3版本的electron，那么找到鏡像下得文件然后放到指定文件夾中。

 

 

3、NSIS下載問題

如果你要打NSIS得包還需要西再下載nsis-resources-xxx等等包。通過錯誤日志我們可以得到我們要下載得版本，一般錯誤中通常會展示github下載地址，直接點開連接去下載。但是位置這次不一樣了。因為這是electron-builder的支持環境所以我們要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis\下了。

一般情況下解決這些問題的思路就是，缺什么拿什么?。

 

 

 

 

 

 

三、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()