用 vscode 中使用 electron 的時候出現了以下兩個錯誤，在 stack overflow 上找到了答案，分享給大家。
本人電腦配置：
vscode Version: 1.46.0
Electron: 9.0.3
Node.js: 12.14.1
OS: Linux x64 4.15.0-106-generic
安裝 electron 步驟：
（1）git clone https://github.com/electron/electron-quick-start （克隆項目倉庫）
（2）cd electron-quick-start （進入倉庫）
（3）npm install （安裝依賴，這個過程會非常慢，最好FQ，或者使用國內鏡像）
（4）npm start (啟動運行)
vscode 運行和調試 electron 的 launch.json 配置如下（點擊 Run -> Open Configurations 就可以打開配置文件了）：
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"},
"args": ["."],
"outputCapture": "std"
}
]
}
我用 vscode 打開 electron-quick-start 這個目錄，修改了其中的 index.html 和 renderer.js 文件如下所示 (這個代碼修改我是從B站上看electron的教學視頻跟着修改的，但是我這里出現了錯誤)：
index.html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
6 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
7 <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
8 <title>Hello World!</title>
9 </head>
10 <body>
11
12 <div>
13 <h2>Process</h2>
14 <button onclick="getProcessInfo()">查看preocess信息</button>
15 </div>
16
17 <!-- You can also require other files to run in this process -->
18 <script src="./renderer.js"></script>
19 </body>
20 </html>
renderer.js:
1 function getProcessInfo(){ 2 console.log("getCPUUsage: ", process.getCPUUsage()); 3 console.log('env', process.env); 4 console.log('arch', process.arch); 5 console.log('arch', process.platform); 6 console.log('arch', process.versions); 7 }
這時候出現了以下錯誤：
error1：Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
這時候查閱資料，在 https://stackoverflow.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox 中找到答案。
解決方法：
首先修改 index.html 文件: 把 <button onclick="getProcessInfo()">查看preocess信息</button> 改成 <button id="btn">查看preocess信息</button>
其次修改 renderer.js 文件: 在 function getProcessInfo() 這一句上面添加上 ： document.getElementById("btn").addEventListener("click", getProcessInfo);
修改好后，再次編譯運行就沒有以上錯誤了。
但是當按下 “查看preocess信息” 的按鈕時，又出現了以下錯誤：
error2 ：renderer.js:10 Uncaught ReferenceError: process is not defined
查閱資料，找到了答案 https://stackoverflow.com/questions/30239060/uncaught-referenceerror-process-is-not-defined
解決方法：
打開 main.js 文件，在 function createWindow() 里面加上一行： nodeIntegration: true ，如下圖所示：
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
}
注意，這個 nodeIntegration: true 的添加非常重要，只有添加了它，才能使 require 和 process 等變量有效。
把這兩個bug都去除后，在 vscode 上按下 F5 運行代碼，再按下 “查看preocess信息” 的按鈕時就可以正常看到輸出結果了：
