Electron: स्थानीय संसाधन लोड करने की अनुमति नहीं है: file://index.html/ webpacking main.js . के बाद

आप शायद webSecurity को webPreferences में BrowserWindow में बंद करने का प्रयास कर सकते हैं। अधिक प्रश्नों के लिए मेरा सुझाव है कि आप समुदाय से मदद मांगें।

@MihaiValentin अरे, क्या आपको इसका कोई हल मिला?

@MihaiValentin @singhshashi मुझे भी यही समस्या थी। ऐसा लगता है कि वेबपैक डिफ़ॉल्ट रूप से __dirname जैसे नोड ग्लोबल्स को "मॉक" करने का प्रयास करता है। मैंने इस व्यवहार को node.__dirname विकल्प के साथ अक्षम कर दिया और ... यह काम कर गया!

बस के मामले में, मैं target विकल्प के लिए वेबपैक-लक्ष्य-इलेक्ट्रॉन-रेंडरर का भी उपयोग कर रहा हूं।

यह मेरा अब तक का विन्यास है। मुझे उम्मीद है यह मदद करेगा:

var webpack = require('webpack');
var path = require('path');
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'index.js'
  },
  node: {
    __dirname: false,
    __filename: false
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        exclude: /node_modules/,
        loader : 'babel'
      }
    ]
  }
};

config.target = webpackTargetElectronRenderer(config);

module.exports = config;

@eiriarte इसे साझा करने के लिए धन्यवाद, हालांकि यह काम नहीं किया। अगर मैं वेबपैक का उपयोग करके मुख्य प्रक्रिया के लिए फाइलों को पैक करता हूं, यहां तक ​​​​कि आपके द्वारा बताए गए नोड कॉन्फ़िगरेशन के साथ, मुझे अभी भी वही त्रुटि मिलती है।

मैं एक वर्कअराउंड साझा कर रहा हूं जिसका उपयोग मैं इस धागे पर आने वाले अन्य लोगों के लिए इस मुद्दे को हल करने के लिए कर रहा हूं।

उन सुविधाओं का उपयोग करने के बजाय जिन्हें मुख्य रूप से सही ढंग से काम करने के लिए उन्हें ट्रांसपाइल करने के लिए बेबेल की आवश्यकता होती है। js फ़ाइल में, मैंने इन्हें अलग-अलग फ़ाइलों में अलग कर दिया। मेरे main.js में मैं ऐसी किसी भी सुविधा का उपयोग नहीं करता जिसके लिए बेबेल ट्रांसपिलेशन की आवश्यकता होती है। इसलिए आयात के बजाय मैं आवश्यकता का उपयोग करता हूं। कोड के लिए जो es7 प्रस्ताव सुविधाओं जैसे कि async का उपयोग कर रहा था, मैंने उस कोड को डेस्कटॉपसर्विसेज नामक फ़ोल्डर के भीतर अलग-अलग फाइलों में स्थानांतरित कर दिया (आप एक बेहतर नाम के साथ आ सकते हैं)। अब मैं डेस्कटॉप सेवाओं के लिए एक बंडल बनाने के लिए वेबपैक चलाता हूं और मैं इस बंडल को main.js में संदर्भित करता हूं।

const myshell = require('./dist/desktopServices').myShell ;

मेरी webpack.config.main.js फ़ाइल में निम्न कॉन्फ़िगरेशन है।

let config = {
  target:'electron',
  entry:'./desktopServices/desktopServices.js',
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename: 'desktopServices.js',
    publicPath:'/dist/',
    libraryTarget:'commonjs2'
  },
  resolve: {
    extensions:["",".js",".json"]
  },
  module: {
    noParse: /node_modules\/json-schema\/lib\/validate\.js/,
    loaders:[{
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    },
      {
        test: /\.json/,
        loader: 'json-loader',
      },
    ],
  },
}

module.exports = config;

सबसे साफ तरीका नहीं है, लेकिन मुझे लगता है कि यह वह मार्ग है जिसे मैं कुछ समय के लिए ले रहा हूं, जब तक कि कुछ ऐसी विशेषताएं जिनका मैं उपयोग करना चाहता हूं, नोड में शामिल हो जाते हैं और बेबेल ट्रांसपिलेशन की आवश्यकता नहीं होती है।

मेरे लिए, यह एक भ्रामक त्रुटि निकली। मुझे not allowed to load local resource त्रुटि मिल रही थी क्योंकि वेबपैक ने फ़ाइल को लोड करने का प्रयास करने से पहले फ़ाइल लिखना समाप्त नहीं किया था, इसलिए नहीं कि यह गलत अनुमतियों के साथ था।

मैंने इसे setTimeout (जावास्क्रिप्ट का डक्ट टेप) के साथ ~फिक्स किया है ताकि मैं जीवन के साथ आगे बढ़ सकूं:

setTimeout(() => {
  win.loadURL(`file:///${__dirname}/index.html`);
}, 2000); // 1 second wasn't enough lol

मेरे लिए .. कारण यह था कि वेबपैक बंडल को आउटपुट कर रहा था .. पहुंच से बाहर था ... मैंने इसे कुछ निर्देशिकाओं को वापस आकर और ऊपर बताए अनुसार नोड कॉन्फ़िगरेशन को लागू करके हल किया .. पूरी तरह से काम करता है: डी

pathname: path.join(__dirname, '../../source/resources/views', 'index.html');

node: {
    __dirname: false,
    __filename: false
  },

Google के माध्यम से यहां उन लोगों के लिए FYI करें: यदि फ़ाइल मौजूद नहीं है तो आपको वही त्रुटि मिलती है। मैं लक्ष्य फ़ाइल को ऐप में कॉपी करने के लिए इलेक्ट्रॉन-पैकेजर को बताना भूल गया। मेरी बेवकूफी भरी गलतियों से सीखो :)

भविष्य के संदर्भ के लिए (जैसा कि मैंने इस पृष्ठ के माध्यम से कई बार खोजा है), यहां वर्तमान संभावित समस्याएं हैं:

1. फ़ाइल मौजूद नहीं है, या आपका नोड एप्लिकेशन उस तक नहीं पहुंच सकता है। सुनिश्चित करें कि electron-packager लक्ष्य फ़ाइल को ऐप में कॉपी कर रहा है!

2. जब आप अपना BrowserWindow() बनाते हैं तो आपको webSecurity को webPreferences $ के भीतर अक्षम करना पड़ सकता है:

{
  webPreferences: {
    webSecurity: false
  }
}

1. वेबपैक, डिफ़ॉल्ट रूप से, node.__dirname जैसे नोड ग्लोबल्स को "मॉक" करने का प्रयास करता है, आप इसे अपनी कॉन्फ़िगरेशन में निम्नलिखित जोड़कर अक्षम कर सकते हैं:

  node: {
    __dirname: false
  }

1. आप setTimeout() (अनुशंसित नहीं) का उपयोग करके URL लोड करने में देरी कर सकते हैं या ऐप से ready ईवेंट भेजे जाने की प्रतीक्षा कर सकते हैं (बेहतर)।

setTimeout(() => {
  win.loadURL(`file:///${__dirname}/index.html`);
}, 2000); // 1 second wasn't enough lol

app.on('ready', () => {
  win.loadURL(`file:///${__dirname}/index.html`);
})

मेरे लिए समाधान था

1. वेब सुरक्षा अक्षम करें।
2. फ़ाइल को संयोजित करने का प्रयास करते समय, मैं __dirname+"./FileName" कर रहा था। तो यह 'C:/Folder./FileName' बना रहा था। तो बस "/" के बजाय कोई "./" नहीं होना चाहिए। यह विकास में कोई मुद्दा नहीं था और जब तक मैंने ASAR नहीं जोड़ा।
3. यह फ़ाइल नामों के सख्त आवरण का अनुसरण करता है। असर जोड़ने के बाद मुझे यह समस्या आई, तब तक यह विकास के साथ-साथ उत्पादन में भी सही काम कर रहा था।

उम्मीद है कि यह मेरे जैसे न्यूब की मदद करता है।

मैं वेबपैक देव सर्वर के लिए अपनी मुख्य ब्राउज़र विंडो पर http://localhost:8080/ लोड कर रहा हूं (इसलिए मैं हॉट मॉड्यूल पुनः लोड कर सकता हूं)। समस्या यह थी कि file:// प्रोटोकॉल के साथ <iframe> पर लोड होने पर यह काम नहीं करता था।

जैसा कि @popey456963 द्वारा बताया गया है, मैंने बस वेब सुरक्षा को अक्षम कर दिया है।

मेरे पास electron-main और electron-renderer . के लिए प्रत्येक वेबपैक के लिए दो कॉन्फ़िगरेशन हैं

const path = require('path');
const config_main = {
  target: 'electron-main',
  entry: path.resolve(__dirname, 'src/main/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'main.js'
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      main   : path.resolve(__dirname, 'src/main/'),
      common : path.resolve(__dirname, 'src/common/')
    }
  }
};

const config_renderer = {
  target: 'electron-renderer',
  entry: path.resolve(__dirname, 'src/renderer/index.js'),
  output: {
    path    : path.resolve(__dirname, 'static'),
    filename: 'renderer.js'
  },
  externals: [{ 'electron-store': 'require("electron-store")' }],
  resolve: {
    alias: {
      components : path.resolve(__dirname, 'src/renderer/components/'),
      core       : path.resolve(__dirname, 'src/renderer/core/'),
      states     : path.resolve(__dirname, 'src/renderer/states/'),
      ui         : path.resolve(__dirname, 'src/renderer/ui/'),
      common     : path.resolve(__dirname, 'src/common/'),
    }
  }
};

module.exports = [
  config_main,
  config_renderer
];

मैंने आवेदन करने की कोशिश की है

  node: {
    __dirname: false
  },

मैंने अपने renderer.js में __dirname को सांत्वना दी है और दोनों ही मामलों में यदि मेरे पास __dirname गलत या सत्य पर सेट है तो वे दोनों / प्रिंट आउट लेते हैं

बेशक अगर मैं मैन्युअल रूप से पूर्ण यूआरएल डालता हूं तो यह काम करता है, हालांकि अनिश्चित क्यों __dirname सही रास्ता देने से इंकार कर देता है।

विचार

webpackTargetElectronRenderer लक्ष्य के समान ही है: electron-main

मेरा मानना ​​​​है कि किसी बिंदु पर electron-main को वेबपैक में webpackTargetElectronRenderer अप्रचलित बना दिया गया था

यहां आप देख सकते हैं कि electron-main क्या करता है
https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70 -L185

यहां आप ठीक उसी कोड को देख सकते हैं।
https://github.com/chentsulin/webpack-target-electron-renderer/blob/master/index.js

पता चला मेरे पास था

  node: {
    __dirname: false
  },

मेरी मुख्य कॉन्फ़िगरेशन के बजाय मेरे रेंडरर कॉन्फ़िगरेशन में। अगर किसी को मेरी कॉन्फिग फाइल पसंद आती है तो मैं अपनी टिप्पणी ऊपर रखूंगा।

क्या होगा यदि मैं वेबपैक का उपयोग नहीं कर रहा हूँ?

@hbgdPro https://github.com/electron/electron/issues/5107#issuecomment -299971806, 1, 2 और 4 से कुछ विकल्पों को आज़माएं, सभी को वेबपैक की आवश्यकता नहीं है।

@ पोपी456963 धन्यवाद। मैंने पूछने से पहले ही कोशिश कर ली थी। मेरी समस्या वास्तव में मुझे यह निर्दिष्ट करना था कि निर्माण प्रक्रिया में मुझे कौन से फ़ोल्डर शामिल करने की आवश्यकता है। इसका वेबपैक से कोई लेना-देना नहीं है।

मैं अभी इस पर खुद आया हूं, (हाय मैं वेबपैक टीम से हूं)। हमारे पास वेबपैक में एक इलेक्ट्रॉन-मुख्य लक्ष्य है, और मुझे नहीं पता था कि __dirname और __filename मॉक डिफ़ॉल्ट त्वरित-प्रारंभ उदाहरण को तोड़ते हैं।

बस सुनिश्चित करने के लिए, इलेक्ट्रॉन टीम। क्या इसे अक्षम करने की आधिकारिक सिफारिश होगी? यदि ऐसा है तो मैं आगे बढ़ूंगा और हमारे पास इलेक्ट्रॉन-मुख्य लक्ष्य के लिए हमारी चूक का पीआर होगा ताकि इन बिल्टिनों का मजाक न उड़ाया जाए।

धन्यवाद!

@TheLarkInn __dirname और __filename अधिकांश इलेक्ट्रॉन ऐप्स के लिए अति महत्वपूर्ण हैं क्योंकि उन्हें रेंडरर प्रक्रिया में दिखाने के लिए HTML फ़ाइल का पथ खोजने के लिए उपयोग किया जाता है। उनका मजाक उड़ाना चीजों को सबसे ज्यादा/हर समय तोड़ता है। उनका उपहास न करने से कई लोगों की समस्याएं ठीक हो जाएंगी

उन लोगों के लिए जो वेबपैक का उपयोग नहीं कर रहे हैं, मैंने एक अजीब समाधान में ठोकर खाई है कि मुझे उम्मीद है कि अधिक अनुभव वाला कोई व्यक्ति विस्तार से बता सकता है। मैं निम्नलिखित का उपयोग कर रहा था और इस धागे में उल्लिखित त्रुटि प्राप्त कर रहा था।

win.loadURL('file://${__dirname}/renderer/main.html')

उपरोक्त कोड को निम्न पर स्विच करने के बाद त्रुटि समाप्त हो गई थी, और एचटीएमएल प्रस्तुत करेगा।

win.loadURL('file://' + __dirname + '/renderer/main.html')

ऐसा लगता है कि मूल किसी कारण से HTML फ़ाइल को अनुचित पथ दे रहा था, क्या किसी को पता है क्यों?

@s-lawrence अनुचित पथ का कारण है:

win.loadURL('file://${__dirname}/renderer/main.html')

होना चाहिए

win.loadURL(`file://${__dirname}/renderer/main.html`)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

आह ठीक है यह समझ में आता है। उस पर विस्तार से बताने के साथ-साथ एक संदर्भ प्रदान करने के लिए @milewski धन्यवाद।

मैं आमतौर पर संयोजन के साथ रहता हूं, लेकिन अब जब मुझे उचित वाक्यविन्यास पता है, तो मैं टेम्पलेट अक्षर का अधिक उपयोग करना शुरू कर दूंगा, वे एक बहुत साफ दिखने वाले हैं।

@milewski , मुझे आपके दो स्निपेट में कोई अंतर नहीं दिख रहा है। क्या दूसरा वाला पहले वाले से अलग होना चाहिए?

@ जेकहॉकी 10 दूसरे में सिंगल कोट्स के बजाय बैकटिक्स हैं। बैकटिक्स इंगित करते हैं कि यह केवल एक स्ट्रिंग अक्षर के बजाय एक टेम्पलेट शाब्दिक है। पहला उदाहरण एक नियमित स्ट्रिंग शाब्दिक है, इसलिए ${__dirname} भाग को कभी भी __dirname मान से प्रतिस्थापित नहीं किया जाता है। कभी-कभी यह नोटिस करना बहुत कठिन होता है यदि आपका संपादक उन्हें अलग तरह से हाइलाइट नहीं करता है (दुर्भाग्य से, GFM सिंटैक्स हाइलाइटर उन्हें अलग नहीं करता है)।

आह गोचा। गिटहब के मार्कडाउन में इसे देखते समय मैंने उस अंतर को नहीं देखा, लेकिन मैं विजुअल स्टूडियो कोड का उपयोग करता हूं और निश्चित रूप से आपके द्वारा उल्लेख किए गए अंतर को नोटिस करता हूं। झूठे अलार्म के लिए खेद है ;-)

बस सोचा कि मैं जोड़ दूंगा, मुझे यह त्रुटि मेरी अपनी गलती (कैप संवेदनशीलता) के कारण भी मिली है
मैं pathname: path.join(__dirname, 'Views/settingsWindow.html') पर कॉल कर रहा था जब फ़ाइल का नाम सभी लोअर केस था।

वेबपैक किए जाने के बाद ही इसने एक त्रुटि उत्पन्न की।

मैंने कुछ समाधानों की कोशिश की, लेकिन यह काम नहीं कर सका ([email protected] के साथ इलेक्ट्रॉन@3.0.7 का उपयोग करके)।
मुझे एक पोस्ट में SO पर केवल 3 वोटों के साथ सबसे अच्छा समाधान मिला: पता चला कि इस पैकेज की कोई आवश्यकता नहीं है!
https://stackoverflow.com/questions/45041364/angular-electron-webpack-live-reloading

शून्य कॉन्फ़िगरेशन-परेशानी समाधान:
-एनपीएम इलेक्ट्रॉन-पुनः लोड की स्थापना रद्द करें
-एक टर्मिनल में एनजी सर्व करें
-in main.js win.loadURL( http://localhost:4200/index.html );
-फिर दूसरे टर्मिनल में npm रन इलेक्ट्रॉन चलाएं

यह सिर्फ काम करता है

मैंने इसे अपना पूरा दिन ठीक करने की कोशिश की और अंत में इस समाधान ने काम किया जाँच करें
https://github.com/electron-userland/electron-builder/issues/2955#issuecomment -393524832

जब आप package.json में "बिल्ड" विशेषता को परिभाषित करते हैं, तो बस आवश्यक फाइलें निम्नलिखित के रूप में जोड़ें:

    "files": [
      "./build/**/*",
      "./index.html",
      "./src/*.js"
    ],

तब इलेक्ट्रॉन-बिल्डर इसे सही ढंग से पैक करेगा।

इसके लिए 'फ़ाइल: //' उपसर्ग निकला जो मुझे loadUrl विधि के लिए आवश्यक था।
था:
win.loadUrl(path.join(__dirname, "./index.html"))
के साथ बदल दिया:
win.loadUrl(path.join("file://",__dirname, "./index.html"))

वेबपैक मुझे एचटीएमएल प्रविष्टि में यूआरएल में आगे और पीछे की स्लैश दोनों को मिलाकर परेशान करता है, इसलिए मैं इसे काम करने के लिए नोड के url और path का उपयोग करता हूं:

const winURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:9080'
  : url.format({
    protocol: 'file',
    pathname: path.join(__dirname, 'index.html'),
  });

यह एक आपदा है, मैं सीआरए + इलेक्ट्रॉन में फंस गया हूं, देव मोड में चल रहा है ठीक है, लेकिन विंडोज़ एक्सई में पैक किया गया बिल्कुल काम नहीं करता है।

मैं समझ गया। यदि आप प्रतिक्रिया-राउटर के साथ सीआरए का उपयोग करते हैं, तो आपको हैश राउटर का उपयोग करना चाहिए, ब्राउनराउटर का नहीं। किया हुआ!!! 😂 https://github.com/electron-userland/electron-builder/issues/2167 देखें