Electron创建项目的两种方式

2022-03-01 11:41:32 浏览数 (1)

前言

两种方式

  1. Vue Cli3 vue-cli-plugin-electron-builder
  2. Webpack HTML JS

怎么选择

方式1适合单窗口的项目，注意一定不要创建多个窗口加载不同的路由，这样会特别的占用内存。

方式2适合多个窗口的项目，这样每个窗口占用的内存都会降下来。

单窗口项目

注意

这里的单窗口项目是可以有多个页面的，可以内部路由跳转。

详情参见：https://cloud.tencent.com/developer/article/1625604

代码语言：javascript复制
vue ui

创建项目后，安装插件

vue-cli-plugin-electron-builder

package.json

代码语言：javascript复制
{
  "name": "paper-optimization",
  "version": "0.1.3",
  "private": true,
  "scripts": {
    "electron:build": "vue-cli-service electron:build --win --ia32",
    "electron:dist_dir": "vue-cli-service electron:build --dir --win --ia32",
    "electron:serve": "vue-cli-service electron:serve"
  },
  "main": "background.js",
  "dependencies": {
    "vue": "^2.6.11",
    "crypto-js": "^4.1.1",
    "getmac": "^5.20.0",
    "md5": "^2.3.0",
    "request": "^2.88.2",
    "view-design": "^4.7.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^7.1.2",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

根目录添加vue.config.js

代码语言：javascript复制
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "cn.psvmc.paperoptimization",
        productName: "论文优化大师",
        icon: "./app.ico",
        asar: true,
        mac: {
          icon: "./app.ico",
          target: ["zip", "dmg"]
        },
        win: {
          icon: "./app.ico",
          target: ["zip", "nsis"]
        },
        nsis: {
          oneClick: false,
          allowElevation: true,
          allowToChangeInstallationDirectory: true,
          installerIcon: "./app.ico",
          uninstallerIcon: "./app.ico",
          installerHeaderIcon: "./app.ico",
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          license: "./LICENSE.txt"
        }
      }
    }
  }
};

多窗口项目

下载项目

代码语言：javascript复制
git clone https://gitee.com/psvmc/electron-quick-start.git
cd electron-quick-start
npm install
npm start

package.json

代码语言：javascript复制
{
  "name": "mytest",
  "productName": "程序名",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "build": {
    "asar": true,
    "extraResources": [
      "./extraResources/**"
    ],
    "files": [
      "build/*",
      "main.js",
      "*.html",
      "image",
      "app.ico",
      "node_modules/**/*"
    ],
    "appId": "cn.psvmc.mytest",
    "win": {
      "icon": "app.ico",
      "target": [
        "zip"
      ]
    },
    "mac": {
      "hardenedRuntime": false
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "app.ico",
      "uninstallerIcon": "app.ico",
      "installerHeaderIcon": "app.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "license": "LICENSE.txt"
    }
  },
  "scripts": {
    "start": "webpack --mode development && cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true electron .",
    "webpack": "webpack --mode development",
    "hot": ".\node_modules\.bin\gulp watch:electron",
    "dist": "webpack --mode development && electron-builder --win --ia32",
    "dist_dir": "webpack --mode development && electron-builder --dir --win --ia32"
  },
  "agora_electron": {
    "electron_version": "10.2.0",
    "platform": "win32",
    "prebuilt": true,
    "arch": "ia32"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^0.25.0",
    "electron": "^10.2.0",
    "electron-builder": "^22.9.1",
    "electron-reload": "^2.0.0-alpha.1",
    "file-loader": "^6.2.0",
    "gulp": "^4.0.2",
    "less": "^4.1.0",
    "less-loader": "^5.0.0",
    "style-loader": "^2.0.0",
    "vue-loader": "^14.2.4",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "agora-electron-sdk": "latest",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "echarts": "^4.8.0",
    "electron-log": "^4.3.5",
    "view-design": "^4.5.0",
    "vue": "^2.6.12"
  }
}

注意

build=>files这里配置所有需要打包的文件，一定不要漏了。 图片建议放在项目根目录下建一个image文件夹，加载图片类似<img src="image/123.png"> > 这样可以保证打包前和打包后运行图片都是可以访问。

项目根目录下添加webpack.config.js

代码语言：javascript复制
const path = require("path");

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    entry: {
        login: "./src/login.js",
        home: "./src/home.js",
    },
    output: {
        path: __dirname   "/build",
        publicPath: "build/",
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
            },
            {
                test: /.(png|jpg|gif|svg|woff|ttf|woff2)$/,
                loader: "file-loader",
                options: {
                    esModule: false,
                    query: {
                        name: "[name].[ext]?[hash]",
                    },
                },
            },
            {
                test: /.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: ['vue-style-loader',"style-loader", "css-loader", "less-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "@": resolve("src"),
        },
    },
};

注意

这里entry中配置每个页面需要打包的JS output设置输出的JS的目录和文件名

把HTML放在根目录

v_login.html

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
</head>
<body>
<div id="app">
</div>
<script src="build/login.js"></script>

<style>
    body {
        background-color: transparent;
    }
</style>
</body>
</html>

注意

这里的login.js是Webpack打包后生成的js。

login.js

代码语言：javascript复制
import Vue from 'vue'
import App from './login.vue'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';

Vue.use(ViewUI);

new Vue({
    el: '#app',
    render: h => h(App)
})

login.vue

代码语言：javascript复制
<template>
  <div>

  </div>
</template>

<script>
const {ipcRenderer, shell} = window.require("electron");

export default {
  name: "login.vue",
  data: function () {
    return {
      loginname: "",
      loginpwd: "",
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>
<style>
body {
  margin: 0;
  padding: 0;
  -webkit-app-region: drag;
  -webkit-user-select: none;

  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
</style>

<style lang='less' scoped>

</style>
vue.js electron 打包 html json

0 人点赞