Electron打包

Posted by JackyCJ Blog on January 13, 2023

Electron开发

环境部署

1.安装

npm install --save-dev @electron-forge/cli
yarn add --dev @electron-forge/cli
npx electron-forge import

2.打包

  • 编译Vue

      npm run build
    
  • 编译Electron

      npm run package
      npm run make
    
  • 配置package

{
    "name": "project",
    "version": "1.0.0",
    "main": "index.js",
    ...
    "config": {
        "forge": {
            "packagerConfig": {
                "ignore": [
                    "^/[.]vs$",
                    "^/public$",
                    "^/src$",
                    "^/[.]browserslistrc$",
                    "^/[.]editorconfig$",
                    "^/tsconfig[.]json$",
                    "[.](cmd|user|DotSettings|njsproj|sln)$"
                ]
            },
            ...
        }
    },
    ...
}

Node版本管理

node版本 16.18.1

1.先查看本机node.js版本:

node -v 2.清除node.js的cache:

sudo npm cache clean -f 3.安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n"

sudo npm install -g n 4.安装最新版本的node.js

sudo n stable 5.再次查看本机的node.js版本:

node -v 6.更新npm到最新版:

$ sodu npm install npm@latest -g 7.验证

node -v
npm -v

Less

npm install -g less

VUE

event

In order to make the div a drop target, the div’s dragenter and dragover events must be canceled. Firefox also needs the drop event to be canceled.

You can invoke Event.preventDefault() on those events with the .prevent event modifier:

<div @drop.prevent="dropLink" @dragenter.prevent @dragover.prevent></div>

If you need to accept/reject drops based on the drag data type, set a handler that conditionally calls Event.preventDefault():

<div @drop.prevent="dropLink" @dragenter="checkDrop" @dragover="checkDrop"></div>
export default {
  methods: {
    checkDrop(e) {
      if (/* allowed data type */) {
        e.preventDefault()
      }
    },
  }
}

参考