小编Rap*_*l10的帖子

升级到 vue 3 后：
yarn add vue@next

我收到此错误：“无法找到模块 '@vue/compiler-sfc/package.json” 执行 yarn electron:serve

(base) marco@pc01:~/webMatters/electronMatters/GGC-Electron$ yarn add vue@next
yarn add v1.22.5
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] …

在 Electron-React-Typescript 应用程序中，我收到此错误： Property 'api' does not exist on type 'Window & typeof globalThis'. window.api.send('open-type-A-window', '');

但是在文件index.d.ts中我以这种方式声明了接口Window：

declare global {
  namespace NodeJS {
    declare interface Window {
      "electron": {
          openNewWindow(): void;
      },
      "api": {
          send: (channel, data) => {
              ipcRenderer.invoke(channel, data).catch(e => console.log(e))
          },
          receive: (channel, func) => {
            console.log("preload-receive called. args: ");
            ipcRenderer.on(channel, (event, ...args) => func(...args));
          },
          electronIpcSendTo: (window_id: string, channel: string, ...arg: any) => {
            ipcRenderer.sendTo(window_id, channel, arg);
          },
          electronIpcSend: (channel: string, ...arg: any) => {
            ipcRenderer.send(channel, …

如何解决"Cannot use import statement outside a module"Electron-React-Typescript 应用程序中的著名问题？

//const { app, BrowserWindow } = require('electron');
import { app, BrowserWindow } from 'electron';

错误 ：

import { app, BrowserWindow } from 'electron';
^^^^^^
SyntaxError: Cannot use import statement outside a module

在 package.json 中我添加了：

"type": "module",

package.json 中的 devDependency ：

"@types/node": "^14.14.28",
"@types/react": "^17.0.2",
"electron": "^11.2.3",
"typescript": "^4.1.5",
"webpack": "^5.21.2"

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "CommonJS",
    "lib": ["dom", "esnext"],
    "outDir": "dist",
    "declaration": true,
    "declarationMap": true,
    "noEmit": true, …

Vue.js 中有类似 React 中的 createContext 的东西吗？https://flaviocopes.com/react-context-api/

我找到了这个https://github.com/zephraph/vue-context-api但我更喜欢使用更多 \xe2\x80\x9cofficial\xe2\x80\x9d

我正在努力理解如何在 .vue 文件中正确导入 ipcRenderer。

我放入 /src/background.js 文件：

webPreferences: {
  nodeIntegration:false,
  contextIsolation: true, // protects against prototype pollution
  preload: path.join(__dirname, "../dist_electron/preload.js"),
}

而且，基于https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration我放入了 preload.js ：

window.ipcRenderer = ipcRenderer

webpack.config.js :

module.exports = {
  entry: './src/background.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'background.js'
  }
}

为了方便调试，我创建了一个github repo。你可以从这里 git 克隆 repo：https : //github.com/raphael10-collab/ElectronVueTypeScriptScaffolding.git

执行 yarn -> yarn electron:serve 你会得到正确的页面。

但是当在 /src/views/Home.vue 中激活这一行时：

//从“电子”导入 { ipcRenderer }

你会得到这个错误：

__dirname 未定义

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS …

我在 preload.js 中定义了 contextBridge ( https://www.electronjs.org/docs/all#contextbridge )，如下所示：

const {
  contextBridge,
  ipcRenderer
} = require("electron")

contextBridge.exposeInMainWorld(
  "api", {
      send: (channel, data) => {
          ipcRenderer.invoke(channel, data).catch(e => console.log(e))
      },
      receive: (channel, func) => {
        console.log("preload-receive called. args: ");
        ipcRenderer.on(channel, (event, ...args) => func(...args));
      },
      // https://www.electronjs.org/docs/all#ipcrenderersendtowebcontentsid-channel-args
      electronIpcSendTo: (window_id: string, channel: string, ...arg: any) => {
        ipcRenderer.sendTo(window_id, channel, arg);
      },
      // https://github.com/frederiksen/angular-electron-boilerplate/blob/master/src/preload
/preload.ts
      electronIpcSend: (channel: string, ...arg: any) => {
        ipcRenderer.send(channel, arg);
      },
      electronIpcSendSync: (channel: string, ...arg: any) => {
        return ipcRenderer.sendSync(channel, arg); …

我试图弄清楚如何在进程main和BrowserView.

我一直在“简单”的过程和过程ipc之间使用。mainrendererreact renderer page

但现在，使用相同的技术，我没有在 的 中看到收到的消息console，BrowserView据我所知，它的行为似乎与“正常”不同react renderer page。这篇SOF文章似乎证实了我的假设：Electron BrowserView Renderer process vs WebView

在preload我定义中：

declare global {
    interface Window {
        api: {
            electronIpcSend: (channel: string, ...arg: any) => void;
            electronIpcOn: (channel: string, listener: (event: any, ...arg: any) => void) => void;
        }
    }
}

在main我有：

function createWindowTypeC (url_string: string) {
    WindowTypeC = new BrowserWindow({
    
        width: 800,
        height: …

我按照此处的建议添加了内容安全策略： https: //www.electronjs.org/docs/tutorial/security#6-define-a-content-security-policy和这里：https://content-security- policy.com/examples/electron/

<html lang="en">\n<head>\n  <meta http-equiv="Content-Security-Policy" content="default-src \'self\'">\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>New Electron App</title>\n</head>\n<body>\n  <span>Our new Electron app</span>\n  <div id="root"></div>\n</body>\n</html>\n

但我仍然收到此消息：\n\xe2\x80\x9c电子安全警告（不安全的内容安全策略）。此渲染器进程没有设置内容安全策略，或者启用了 \xe2\x80\x9cunsafe-eval\xe2\x80\x9d 的策略。这使该应用程序的用户面临不必要的安全风险。应用程序打包后，将不会显示此警告。\xe2\x80\x9d

如何解决这个安全警告？

在 Electron-React-Typescript 应用程序中，我收到此错误：

Automatic publicPath is not supported in this browser

package.json 中的 devDependency ：

"css-minimizer-webpack-plugin": "^1.2.0",
"electron": "^11.2.3",
"typescript": "^4.1.5",
"webpack": "^5.21.2",
"webpack-bundle-analyzer": "^4.4.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"

按照此处找到的指示进行操作：此浏览器不支持 Webpack5 自动 publicPath

webpack.rules.config.js ：

// Images Loader
test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
use: [
  {
    loader: 'file-loader',
    options: {
      //publicPath: '',
      publicPath: inDev ? 'images' : './main_window/images',
      outputPath: inDev ? 'images' : './main_window/images',
    },
  },

我尝试将 publicPath 设置为空并填充 outputPath 的值。还删除了 mini-css-extract-plugin。但这些都不起作用。

有什么建议么？

我收到此错误：

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' ：

(base) raphy@pc:~/NEW-Raphy-Template$ yarn start
yarn run v1.22.18
$ yarn run build && ELECTRON_DISABLE_SECURITY_WARNINGS=true electron ./dist/main/main.js
$ npx webpack --config ./webpack.config.js
asset main.js 11.2 MiB [compared for emit] (name: main)
runtime modules 793 bytes 4 modules
javascript modules 8.33 MiB
  modules by path ./node_modules/ 8.26 MiB
    cacheable modules 8.26 MiB 1402 modules
    optional modules 3.24 KiB [optional] …

我意识到第二个电子浏览器窗口确实打开了，但它无法正确渲染。

在 /tools/forge/forge.config.js 中，我有两个窗口的两个入口点：

        entryPoints: [

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer.ts'),
          // Main Window
          name: 'main_window',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

        {
          // React Hot Module Replacement (HMR)
          rhmr: 'react-hot-loader/patch',
          // HTML index file template
          html: path.join(rootDir, 'src/index_two.html'),
          // Renderer
          js: path.join(rootDir, 'src/renderer_two.ts'),
          // Main Window
          name: 'main_window2',
          // Preload
          preload: {
            js: path.join(rootDir, 'src/preload.ts'),
          },
        },

      ], 

这是 …

在一个 electron.js 应用程序中，我试图根据这些指示从 node.js 调用和执行 python 脚本：https : //nodejs.org/api/child_process.html#child_process_child_process_execfile_file_args_options_callback

import { execFile } from 'child_process';

let pythonPath = '/home/marco/anaconda3/bin/python3';

execFile('./scripts/factorial.py',
  [parseInt(msg)],
  { cwd: './scripts',
    env: '/home/marco/anaconda3/bin/python3'
  },
  (error, stdout, stderr) => {
    if (error) {
      throw error;
    }
    console.log(stdout);
  }
);

我得到这个错误：

评论options部分时：

execFile('./scripts/factorial.py',
  [parseInt(msg)],
  //{ cwd: './scripts',
    //env: '/home/marco/anaconda3/bin/python3'
  //},
  (error, stdout, stderr) => {
    if (error) {
      throw error;
    }
    console.log(stdout);
  }
);

我犯了同样的错误。

按照此处找到的指示：https : //www.tutorialspoint.com/run-python-script-from-node-js-using-child-process-spawn-method 我修改了代码如下：

const { spawn } = require('child_process'); …

我想定义两个类A，并I以它们的对象尊重这种关系的方式：

i1 -----------a1
  |------a2
  |----a3

• 该类的一个实例I指向该类的零个、一个或多个实例A。

• 类的一个实例A仅指向该类的一个实例I。

• 类的实例I可以没有任何类的实例A，但类的实例必须“附加”A类的实例。I

为了满足这些条件，我将这两个类声明如下：

class I;
class A
{
    private:
        std::string as;
        std::shared_ptr<I> iA;        
    public:
        A(std::string aTxt);
        A();
        ~A();
};

class I
{
   private:
       std::string ip;
       std::vector<std::unique_ptr<A>> as;
       friend class A;
   public:
       I(std::string i);
       ~I();
};

在源文件中，我以这种方式定义了这两个类：

A::A(std::string aText)
{
    as = aText;
}

A::A()
{
    as = "";
}

A::~A()
{
}

I::I(std::string i)
{ …