问题描述
通过这个简单的vue页面:
With this simple vue page:
<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'导入{{ipcRenderer}会产生错误__dirname:
The only presence of import { ipcRenderer } from 'electron' produces the error __dirname is not defined :
此问题是与Webpack配置有关还是由于其他原因引起的?
Is this problem is something related to webpack configuration or it is due to something else?
这是我的webpack.config.js:
This is my 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$`)
)
]
}
这是事实。 config.js:
This is 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
}
}
}
- 电子:版本9.0.0
- webpack:版本4.44.1
- 系统:
操作系统:Linux 5.4 Ubuntu 18.04.4 LTS(Bionic Beaver)
CPU:( 8)x64 Intel(R)CoreTM i7-4790K CPU @ 4.00GHz - 二进制文件:
节点:14.5.0-〜/ .nvm / versions / node / v14.5.0 / bin / node
纱: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 - Electron: version 9.0.0
- webpack: version 4.44.1
- 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/nodeYarn: 1.22.4 - /usr/bin/yarnnpm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
- Browsers:Chrome: 84.0.4147.105Firefox: 79.0
寻找战争d寻求您的帮助。
Marco
Looking forward to your kind help.Marco
推荐答案
__ dirname是NodeJS变量,在最近的电子版本中,默认情况下禁用节点集成。打开BrowserWindow时,应在选项中添加以下内容:
__dirname is a NodeJS variable, in recent electron versions, node integration is disabled by default. When opening your BrowserWindow, you should add the following to the options:
webpreferences:{
nodeIntegration: true
}
这似乎可以解决大多数人的问题(对我来说可悲的是,我现在遇到下一个错误:
fs.existsSync不是函数
)
this seems to solve it for most people (for me sadly enough i now get the next error:fs.existsSync is not a function
)
这篇关于从'electron'导入{ipcRenderer}会产生此错误:__dirname未定义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!