Question

我首先使用@ vue / cli创建了一个全新的vue.js项目：

创建新项目

在创建过程中，我选择了typecipt选项。

然后，我安装了electronic-builder插件：

vue添加电子助洗剂

执行纱线电子：为全新的应用服务似乎可行：

但是当我添加这两行时：

ipcRenderer.on（'settings'，（）=> { }

在Ipc.vue中：

我到那里出现错误消息：

babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    //"module": "es2015",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    "paths": {
     "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

环境信息：

System:
  OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)
  CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Binaries:
  Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
  Yarn: 1.22.4 - /usr/bin/yarn
  npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
Browsers:
  Chrome: 84.0.4147.105
  Firefox: 79.0
npmPackages:
  @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
  @vue/babel-plugin-transform-vue-jsx:  1.1.2 
  @vue/babel-preset-app:  4.4.6 
  @vue/babel-preset-jsx:  1.1.2 
  @vue/babel-sugar-functional-vue:  1.1.2 
  @vue/babel-sugar-inject-h:  1.1.2 
  @vue/babel-sugar-v-model:  1.1.2 
  @vue/babel-sugar-v-on:  1.1.2

如何解决问题？期待您的帮助。马可

更新1）

在createWindow（）函数中放入nodeIntegration：true我收到以下新错误消息：

顺便说一句，出于安全考虑，我希望保留nodeIntegration：false 我尝试按照此处的建议使用预加载文件：Electron require() is not defined 但是：

  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(app.getAppPath(), "preload.js"),

我收到此错误消息：

更新2）

这是preload.js：

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

const path = require("path");

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender` 
                ipcRenderer.on(channel, (event, ...args) =>    
func(...args));
            }
        }
    }
);

在background.js中，我放了：

webPreferences: {
  nodeIntegration: false,
  contextIsolation: true,
  preload: path.join(__dirname, "preload.js"),
}

我收到此错误：

更新3）

仅使用nodeIntegration：true，无需预加载：

webPreferences: {
    nodeIntegration: true,
}

我收到此错误：

还预加载：

webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, "preload.js"),
}

我收到另一个错误：

更新4）preload.js和background.js位于同一文件夹中：src

webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, "./preload.js"),
}

我收到此错误：

这是webpack.config.js：

import 'script-loader!./script.js';
import webpack from 'webpack';

const path = require('path');

module.exports = {
  target: ['electron-renderer', 'electron-main', 'electron-
preload'],
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: config => {
        config.resolve.alias.set('jsbi', path.join(__dirname, 
    'node_modules/jsbi/dist/jsbi-cjs.js'));
      }
    },
  },
};

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

webpack.config.js是正确的，还是我应该在这里修改一些内容？

__dirname尚未定义：ipcRenderer.on（‘settings’，（）=> {

0 个答案: