vue.js - 从 'electron'导入{ipcRenderer}会产生此错误: __dirname is not defined

Question

通过这个简单的Vue页面:

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import { ipcRenderer } from 'electron'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      dato: null
    }
  },
  methods: {
    rendererFunct () {
      //ipcRenderer.on('setting', (event, arg) => {
        //console.log(arg);
      //})
    }
  }
}
</script>

从'electron'唯一存在import {ipcRenderer}会产生错误__dirname，未定义:

这个问题是与webpack配置有关还是由于其他原因？
这是我的webpack.config.js:

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

const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');

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'
  }
}

module.exports = config => {
  config.target = "electron-renderer";
  return config;
};

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'source', to: 'dest' },
        { from: 'other', to: 'public' },
      ],
      options: {
        concurrency: 100,
      },
    }),
  ],
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

const supportedLocales = ['en-US', 'it'];

export default const config = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      /date\-fns[\/\\]/,
      new RegExp(`[/\\\\\](${supportedLocales.join('|')})[/\\\\\]index\.js$`)
    )
  ]
}

这是vue.config.js:

module.exports = {
  configureWebpack: {
    // Configuration applied to all builds
  },
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        // Chain webpack config for electron main process only
      },
      chainWebpackRendererProcess: (config) => {
        config.plugin('define').tap((args) => {
          args[0]['IS_ELECTRON'] = true
          return args
        })
      },
      mainProcessFile: 'src/background.js',
      mainProcessWatch: ['src/preload.js'],
    }
  }
}

module.exports = {
  pluginOptions: {
    electronBuilder: {
      disableMainProcessTypescript: false,
      mainProcessTypeChecking: false
    }
  }
}

Electron:版本9.0.0

webpack:版本4.44.1

系统:
操作系统:Linux 5.4 Ubuntu 18.04.4 LTS(Bionic Beaver)
CPU:(8)x64 Intel(R)Core(TM)i7-4790K CPU @ 4.00GHz

二进制文件:
节点: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

浏览器:
Chrome :84.0.4147.105
Firefox:79.0

期待您的帮助。
马可

Answer 1

__dirname是一个NodeJS变量，在最近的 Electron 版本中，默认情况下禁用节点集成。打开BrowserWindow时，应在选项中添加以下内容:

webpreferences:{
    nodeIntegration: true
}

但是，强烈建议不要使用 ，因为这会带来安全问题。
这似乎可以解决大多数人的问题(对我来说，可悲的是，我现在遇到下一个错误:fs.existsSync is not a function)
一个更好的解决方案，我将您的 bundle 器更改为正确的构建模式。您不应该为节点而构建，而应该为网络构建，所以可以使用target:esnext之类的东西。
如果某些内容需要节点访问，则应通过在后台线程或预加载脚本中运行它来解决。