Linux下Electron loadURL報錯 ERR_FAILED(-2) Not allowed to load local resource

背景

使用electron-vue的時候，窗體創建后加載頁面使用的是loadURL函數，並且傳入的參數形如：

`file://${__dirname}/index.html`

PS：在electron-vue中，編譯打包后的__dirname是asar所在絕對地址/dist/electron/。

編譯打包后的Electron程序啟動時候，發現在調用loadURL的時候會出現：ERR_FAILED(-2) 。

遂臨時啟動DevTool窗口查看控制台輸出，發現類似如下錯誤：

Not allowed to load local resource: file://XXXXXX/app.asar/dir1/dir2/index.html

原因及方案

1、文件並不存在於你的asar包中

處理方式：

1. 全局安裝npm install -g asar
2. 通過asar解壓app.asar包，檢查上述提到的file路徑中是否存在你的index.html。

2、嘗試禁用窗體參數中的webSercurity

處理方式：

{
  webPreferences: {
    webSecurity: false
  }
}

3、檢查webpack配置中的__dirname，防止webpack處理'mock'

這一點主要是當上述Not alloed to load local resource提到的路徑明顯不正確時候，可以檢查。

  // webpack配置文件中的node節點，當打包的時候需要防止webpack處理
  node: {
    __dirname: false
  }

webpack配置文件中的node節點，當打包的時候需要防止webpack處理__dirname，如果你使用了electron-vue腳手架應該不需要關心，因為你會看到如下的內容，已經幫你處理了：

  node: {
    __dirname: process.env.NODE_ENV !== 'production',
    __filename: process.env.NODE_ENV !== 'production'
  },

4、使用loadFile而不是loadURL

使用loadFile接口來加載本地的路徑，loadFile('path/to/index.html')，這個路徑是以app.asar根路徑為base的。例如，loadFile('dir_path1/dir_path2/index.html')，那么你的index.html在app.asar是如下的結構：

app.asar
|-dir_path1
  |-dir_path2
    |-index.html

5、確定file協議斜桿正確

本人在編寫代碼的時候，由於馬虎，loadURL的參數想要加載本地的頁面，file:/XXX少寫了一個斜杠，應該是file://，導致加載問題。