Electron: غير مسموح بتحميل المورد المحلي: file: //index.html/ بعد webpacking main.js

ربما يمكنك محاولة إيقاف تشغيل webSecurity في webPreferences من BrowserWindow . لمزيد من الأسئلة أقترح طلب المساعدة من المجتمع .

MihaiValentin مرحبًا ، هل وجدت حلاً لهذا؟

MihaiValentin singhshashi كان لدي نفس المشكلة. يبدو أن webpack ، افتراضيًا ، يحاول "محاكاة" Node globals مثل __dirname . لقد عطلت هذا السلوك مع الخيار node.__dirname و… لقد نجح!

فقط في هذه الحالة ، أستخدم أيضًا عارض webpack-target-electron للخيار 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 شكرا لتقاسم ذلك ، ولكن ذلك لم ينجح. إذا قمت بتعبئة الملفات للعملية الرئيسية باستخدام حزمة الويب ، حتى مع تكوين العقدة الذي قلته ، ما زلت أحصل على نفس الخطأ.

أشارك حلاً أستخدمه للتغلب على المشكلة للآخرين الذين وصلوا إلى هذا الموضوع.

بدلاً من استخدام ميزات es التي تتطلب babel لتحويلها للعمل بشكل صحيح في الأساس. js ، فقمت بفصل هذه الملفات إلى ملفات مختلفة. في main.js الخاص بي لا أستخدم أي ميزات تتطلب ترشيح babel. لذا بدلاً من الاستيراد أستخدم طلب. بالنسبة للكود الذي كان يستخدم ميزات اقتراح es7 مثل المزامنة ، قمت بنقل هذا الرمز إلى ملفات مختلفة ، داخل مجلد يسمى desktopServices (يمكنك الحصول على اسم أفضل). أقوم الآن بتشغيل حزمة الويب لإنشاء حزمة لـ desktopServices وأشير إلى هذه الحزمة في 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;

ليست الطريقة الأنظف ، لكنني أعتقد أن هذا هو المسار الذي أسلكه في الوقت الحالي حتى يتم دمج بعض ميزات es التي أريد استخدامها في العقدة ولا تتطلب نقل بابل.

بالنسبة لي ، اتضح أنه خطأ مضلل. تلقيت الخطأ not allowed to load local resource لأن webpack لم ينته من كتابة الملف قبل أن أحاول تحميله ، وليس لأنه كان موجودًا بأذونات خاطئة.

لقد أصلحته ~ ولفته بـ setTimeout (الشريط اللاصق الخاص بجافا سكريبت) حتى أتمكن من مواصلة الحياة:

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

بالنسبة لي .. السبب هو أن المسار الذي كانت حزمة الويب تخرج منه الحزمة .. كان بعيد المنال ... لقد قمت بحلها بالعودة إلى بعض الأدلة وتطبيق تكوين العقدة كما هو مقترح أعلاه .. يعمل بشكل مثالي: D

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

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

لمعلوماتك لأولئك الموجودين هنا عبر google: ستحصل على نفس الخطأ إذا لم يكن الملف موجودًا. لقد نسيت أن أخبر برنامج حزم الإلكترون بنسخ الملف الهدف إلى التطبيق. تعلم من أخطائي الغبية :)

للرجوع إليها في المستقبل (كما بحثت في هذه الصفحة مرات عديدة) ، إليك المشكلات الحالية المحتملة:

1. الملف غير موجود ، أو لا يمكن لتطبيق Node الخاص بك الوصول إليه. تأكد من أن electron-packager ينسخ الملف الهدف إلى التطبيق!

2. قد تحتاج إلى تعطيل webSecurity داخل webPreferences عند إنشاء BrowserWindow() :

{
  webPreferences: {
    webSecurity: false
  }
}

1. يبدو أن Webpack ، افتراضيًا ، يحاول "محاكاة" العقدة الكروية مثل node.__dirname ، يمكنك تعطيل هذا عن طريق إضافة ما يلي إلى التكوين الخاص بك:

  node: {
    __dirname: false
  }

1. يمكنك تأخير تنفيذ تحميل عنوان URL باستخدام setTimeout() (غير مستحسن) أو انتظار إرسال الحدث 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. يتبع غلاف صارم لأسماء الملفات. واجهت هذه المشكلة بعد إضافة asar ، حتى ذلك الحين كانت تعمل بشكل مثالي في التطوير والإنتاج.

أتمنى أن يساعد هذا شخصًا مثلي.

أقوم بتحميل http://localhost:8080/ في نافذة المتصفح الرئيسية لخادم webpack dev (حتى أتمكن من إعادة تحميل الوحدة الساخنة). كانت المشكلة أنه عند التحميل باستخدام بروتوكول 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 مضبوطًا على false أو صحيح ، فهما يطبعان /

بالطبع ، إذا وضعت عنوان url المطلق يدويًا ، فإنه يعمل ، على الرغم من عدم التأكد من سبب رفض __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 كلها لا تتطلب حزمة الويب.

@ popey456963 شكرا. لقد حاولت بالفعل قبل أن أسأل. كانت مشكلتي في الواقع أنني اضطررت إلى تحديد المجلدات التي أحتاج إلى تضمينها في عملية الإنشاء. لا علاقة له بحزمة الويب.

لقد صادفت هذا للتو بنفسي ، (مرحبًا ، أنا من فريق webpack). لدينا هدف رئيسي للإلكترون في حزمة الويب ، ولم أكن أعلم أن __dirname و __filename يكسرون مثال البدء السريع الافتراضي.

فقط للتأكد ، فريق الإلكترون. هل ستكون هذه توصية رسمية لتعطيل هذا؟ إذا كان الأمر كذلك ، فسأمضي قدمًا والعلاقات العامة مع قيمنا الافتراضية للهدف الإلكتروني الرئيسي الذي لدينا حتى لا يتم الاستهزاء بهذه البنايات.

شكرا!

TheLarkInn __dirname و __filename مهمان للغاية لمعظم تطبيقات الإلكترون حيث يتم استخدامها للعثور على المسار إلى ملف HTML لإظهاره في عملية العارض. الاستهزاء بهم يكسر الأشياء في معظم الأحيان / طوال الوقت. عدم الاستهزاء بهم سيصلح مشاكل كثير من الناس 👍

بالنسبة لأولئك الذين لا يستخدمون Webpack ، عثرت على حل غريب وآمل أن يتمكن شخص لديه خبرة أكبر من شرحه بالتفصيل. كنت أستخدم ما يلي وتلقيت الخطأ المذكور خلال هذا الموضوع.

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

بعد تبديل الكود أعلاه إلى ما يلي ذهب الخطأ ، وسيظهر 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 ، لا أرى اختلافًا في المقتطفين. هل من المفترض أن يكون الثاني مختلفًا عن الأول؟

@ jakehockey10 الثاني به backticks بدلاً من علامات الاقتباس المفردة. تشير العلامات الخلفية إلى أنه قالب حرفي وليس مجرد سلسلة حرفية. المثال الأول عبارة عن سلسلة حرفية عادية ، لذلك لا يتم استبدال الجزء $ # ${__dirname} __dirname . من الصعب جدًا ملاحظة في بعض الأحيان ما إذا كان المحرر الخاص بك لا يميزهم بشكل مختلف (لا تميزهم أداة تمييز بناء الجملة GFM ، لسوء الحظ).

آه مسكتك. لم ألاحظ هذا الاختلاف عند مشاهدته في Markdown الخاص بـ GitHub ، لكنني أستخدم Visual Studio Code وألاحظ بالتأكيد الفرق هناك كما ذكرت. عذرا للانذار الكاذب ؛-)

فقط اعتقدت أنني سأضيف ، لقد تلقيت هذا الخطأ أيضًا بسبب خطأ فادح (حساسية الغطاء)
كنت أتصل بـ pathname: path.join(__dirname, 'Views/settingsWindow.html') عندما كان اسم الملف كله بأحرف صغيرة.

تسبب هذا في حدوث خطأ بمجرد حزم الويب.

لقد جربت بعض الحلول ولكن لم أتمكن من تشغيلها (باستخدام [email protected] مع [email protected]).
لقد وجدت أفضل حل في منشور بأصوات 3 فقط على SO: تبين أنه ليست هناك حاجة لهذه الحزمة!
https://stackoverflow.com/questions/45041364/angular-electron-webpack-live-reloading

حل خالي من المتاعب للتكوين:
-npm إلغاء تثبيت إعادة تحميل الإلكترون
-Run ng يخدم في محطة واحدة
-في main.js غيّر win.loadURL ( http://localhost:4200/index.html ) ؛
-ثم قم بتشغيل npm تشغيل الإلكترون في محطة أخرى

إنه يعمل فقط

حاولت إصلاح هذا طوال يومي وأخيراً نجح حل الرجال هذا
https://github.com/electron-userland/electron-builder/issues/2955#issuecomment -393524832

عند تحديد السمة "build" في package.json ، ما عليك سوى إضافة الملفات المطلوبة على النحو التالي:

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

ثم يقوم منشئ الإلكترون بتعبئتها بشكل صحيح.

تبين أن بادئة "file: //" هي كل ما أحتاجه لطريقة loadUrl.
ملك:
win.loadUrl(path.join(__dirname, "./index.html"))
تم استبداله ب:
win.loadUrl(path.join("file://",__dirname, "./index.html"))

يحيرني Webpack عند مزج كل من الشرطتين المائلتين للأمام والخلف في عنوان URL لإدخال html ، لذلك أستخدم العقدة url و path لجعلها تعمل:

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

إنها كارثة ، أنا عالق في CRA + الإلكترون 😂 ، التشغيل في وضع dev لا بأس به ، لكن حزمته في windows exe لا يعمل على الإطلاق.

لقد فهمت. 🤣 إذا كنت تستخدم CRA مع جهاز التوجيه التفاعلي ، فيجب عليك استخدام HashRouter ، وليس BrowerRouter. منجز!!! 😂 ارجع إلى https://github.com/electron-userland/electron-builder/issues/2167