Electron 初始化项目搭建

1、搭建脚手架

//执行如下命令搭建工程
mkdir my-electron-app && cd my-electron-app  
npm init
npm install --save-dev electron //这里如果报错，执行如下命令

npm config edit //打开npm配置文件
//重置如下配置，没有的就新增
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

删除node_modules
重启终端或vscode

再执行命令试试
npm install --save-dev electron

2、初始化项目

//创建入口文件main.js, (package文件main对应的文件名)

//main.js文件内容
const { app, BrowserWindow } = require('electron');

app.on('ready', () => {
  // 当app准备好的时候调用回调
  const win = new BrowserWindow({
    //创建窗口
    width: 800,
    height: 600,
    autoHideMenuBar: true, //隐藏默认配置菜单
    x: 0,
    y: 0, //在什么位置打开
    alwaysOnTop: true, //一直置顶，不被遮挡
  });
  win.loadURL('https://blog.csdn.net/m0_56772756?type=blog'); //加载远程页面
  // win.loadFile('./pages/index.html'); //加载远程页面
});

// 此时启动项目会看到窗口加载的页面

出现警告，配置<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';style-src 'self' 'unsafe-inline';img-src 'self' ">

配置说明：

• default-src 'self'
  • default-src：配置加载策略，适用于所有未在其它指令中明确指定的资源类型。 self：仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。
• style-src 'self' ' unsafe-inline
  • style-src：指定样式表(CSS)的加载策略。 self：仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。 unsafe-inline ：允许在HTML文档内使用内联样式。
• img-src 'self' data:
  • img-src：指定图像资源的加载策略。 self：表示仅允许从同源加载图像。 data:：允许使用data: URI来嵌入图像。这种URI模式允许将图像数据直接嵌入到HTML或CSS中，而不是通过外部链接引用。

配置说明参考： developer.mozilla.org/zh-CN/docs/…

3、项目自动重启

npm i nodemon -d

//修改package.json文件
"start": "nodemon --exec electron ."

• 还需在nodemon.json文件配置如下代码,因为只实现了mian.js的修改触发自动重启，页面的修改不能实现自动重启

{
  "'ignore":[
      "node_modules",
      "dist"
  ],
  "restartable":"r", // 在终端命令行中输入r实现程序自动重启
  "watch":["*.*"],
  "ext":"html,js,css"
}