【BS转CS】

方法一（最简单的方式）

利用chrome,将网页发送到桌面快捷方式。步骤如图所示：

然后在快捷方式点击属性，目标设置为添加
“C:\Program Files\Google\Chrome\Application\chrome_proxy.exe” --kiosk http:192.168.1.30:9001/login，
–kiosk http:192.168.1.30:9001/login 只需要这个配置，–kiosk是chrome的演示模式，后面可以跟任何网页地址（换成自己前端部署地址即可）。

致命缺点，当有其他chrome页面打开时，其无法进入演示模式，而是普通网页模式，伪装失败。

方法二 electron套壳

1、首先安装各种依赖包
npm install --save-dev electron
npm install electron-builder --dev
注意：electron 相关的依赖包整到devDependences里面去

安装过程中中报错 host id的，解决方法如下：
1首先 npm set strict-ssl false
2其次 更改npm 配置
输入`npm config ls`,找到npm的配置文件/Users/.../.npmrc
点击进入npmrc 修改配置：
registry=http://registry.npmjs.org/
strict-ssl=false
sass_binary_site=https://npm.taobao.org/mirrors/node-sass
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

2、在项目的根部录下添加三个文件：preload.js 、 electron-builder.json \ main.js
preload.js

在这里插入代码片 啥也不用管
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
   
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

main.js

在这里插入代码片 注意两种方式：loadFile是从打包的html里入口，loadURL则是从前端部署网址的形式打包.跨域见webSecurity: false//是否禁用同源策略(上线时删除此配置)
const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, "favicon.ico"),
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      webSecurity: false//是否禁用同源策略(上线时删除此配置)
    },
    autoHideMenuBar:true
  });
  //win.loadFile("hbks/index.html");
  win.loadURL('http://localhost:9001/login')
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

electron-builder.json

在这里插入代码片 生成exe的图标在此配置，需要准备一个256*256的icon，也放在根目录下
{
  "productName": "hbks",
  "files": [
    "./main.js",
    "./hbks"
  ],
  "extraFiles": [
    "./videos",
    "./cvideo"
  ],
  "directories": {
    "output": "./builder"
  },
  "win": {
      "icon": "./favicon.ico"
  }
}

3、修改package.json文件

在这里插入代码片 添加配置 main（对应上面写的main.js,是electron的入口）、 script里的electron:server \ selectron:build
其中selectron:build 后面的./electron-builder.json 就是前面写的那个文件的路径。
{
  "name": "xxxxx",
  "version": "0.0.0",
  "private": true,
  "author": "xxxxx",
  "description": "xxxxx",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "electron .",
    "electron:build": "vite build & electron-builder build --config ./electron-builder.json"
  },
  "dependencies": {
    "@turf/turf": "^7.0.0",
    "axios": "^1.7.2",
    "element-plus": "^2.7.5",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "nanoid": "^5.0.7",
    "pinia": "^2.1.7",
    "qs": "^6.12.1",
    "sass": "^1.77.5",
    "sass-loader": "^7.3.1",
    "turf": "^3.0.14",
    "vue": "^3.4.21",
    "vue-drag-resize": "^1.5.4",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.8",
    "electron": "^31.2.1",
    "electron-builder": "^24.13.3",
    "electron-reload": "^2.0.0-alpha.1"
  }
}

20240903补充
适配现场2560*1600分辨率，且150%缩放比例，修改配置

width: 1920,
height: 1080,
webPreferences: {
      zoomFactor: 1.0,
      preload: path.join(__dirname, "preload.js"),
      webSecurity: false,
},
//分辨率锁定
win.setAspectRatio(16 / 9);
//配合F11全屏