Electron: webpacking main.js 후 로컬 리소스를 로드할 수 없음: file://index.html/

webPreferences of BrowserWindow webSecurity 끄기를 시도할 수 있습니다. 더 많은 질문에 대해서는 커뮤니티 에서 도움을 구하는 것이 좋습니다.

@MihaiValentin 이봐, 이것에 대한 해결책을 찾았습니까?

@MihaiValentin @singhshashi 저도 같은 문제가 있었습니다. 기본적으로 webpack은 __dirname 와 같은 Node 전역을 "조롱"하려고 하는 것 같습니다. node.__dirname 옵션을 사용하여 이 동작을 비활성화했고… 작동했습니다!

만일을 대비하여 target 옵션 에 webpack-target-electron-renderer 도 사용하고 있습니다.

이것은 지금까지 내 구성입니다. 도움이 되기를 바랍니다.

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;

@eiriart 공유해 주셔서 감사합니다. 그러나 작동하지 않았습니다. webpack을 사용하여 메인 프로세스에 대한 파일을 압축하면 말씀하신 노드 구성에도 불구하고 여전히 동일한 오류가 발생합니다.

이 스레드에 도착한 다른 사람들을 위해 문제를 해결하는 데 사용하는 해결 방법을 공유하고 있습니다.

기본에서 올바르게 작동하려면 babel을 변환해야 하는 es 기능을 사용하는 대신. js 파일에서 이것을 다른 파일로 분리했습니다. 내 main.js에서는 babel 변환이 필요한 기능을 사용하지 않습니다. 그래서 import 대신 require를 사용합니다. async와 같은 es7 제안 기능을 사용하는 코드의 경우 해당 코드를 desktopServices라는 폴더 내의 다른 파일로 옮겼습니다(더 나은 이름을 찾을 수 있음). 이제 webpack을 실행하여 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 기능 중 일부가 노드에 통합되고 babel 변환이 필요하지 않을 때까지 당분간 이 방법을 사용하는 것 같습니다.

나를 위해, 그것은 오해의 소지가 있는 오류로 판명되었습니다. 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. BrowserWindow() 를 만들 때 webPreferences webSecurity 를 비활성화해야 할 수도 있습니다.

{
  webPreferences: {
    webSecurity: false
  }
}

1. Webpack은 기본적으로 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. 파일 이름의 엄격한 대소문자를 따릅니다. asar를 추가한 후 발생한 이 문제는 그때까지 개발 및 프로덕션에서 완벽하게 작동했습니다.

이것이 나 같은 nube에게 도움이되기를 바랍니다.

webpack dev 서버용 메인 브라우저 창에 http://localhost:8080/ 를 로드하고 있습니다. 문제는 <iframe> 에서 file:// 프로토콜로 로드할 때 작동하지 않는다는 것입니다.

@popey456963 이 지적한 대로 단순히 웹 보안을 비활성화했습니다.

electron-main 및 electron-renderer 에 대해 각각 두 가지 webpack 구성이 있습니다.

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 또는 true로 설정하면 둘 다 / 를 출력합니다.

물론 절대 URL을 수동으로 입력하면 작동하지만 __dirname 가 올바른 경로를 제공하는 것을 거부하는 이유는 확실하지 않습니다.

고려사항

webpackTargetElectronRenderer 는 대상과 동일합니다: electron-main

어떤 시점에서 electron-main 가 webpackTargetElectronRenderer 를 절대적으로 만드는 webpack으로 롤링되었다고 생각합니다.

여기서 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 팀에서 왔습니다). 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 두 번째는 작은 따옴표 대신 백틱이 있습니다. 백틱은 문자열 리터럴이 아니라 템플릿 리터럴 임을 나타냅니다. 첫 번째 예는 일반 문자열 리터럴이므로 ${__dirname} 부분은 __dirname 값으로 대체되지 않습니다. 에디터가 다르게 강조 표시하지 않는 경우(불행히도 GFM 구문 형광펜은 이를 구분하지 않습니다) 때때로 알아차리기가 꽤 어렵습니다.

아 알았어. GitHub의 Markdown에서 볼 때 그 차이를 느끼지 못했지만 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 전자 재장전 제거
- 하나의 터미널에서 ng serve 실행
-main.js에서 win.loadURL 변경( http://localhost:4200/index.html );
-그런 다음 다른 터미널에서 npm run electron을 실행하십시오.

그냥 작동

나는 하루 종일 이것을 고치려고 노력했고 마침내이 사람들의 솔루션이 작동했습니다.
https://github.com/electron-userland/electron-builder/issues/2955#issuecomment -393524832

package.json에서 "build" 속성을 정의할 때 다음과 같이 필요한 파일을 추가하기만 하면 됩니다.

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

그러면 전자 건축업자가 그것을 올바르게 포장할 것입니다.

loadUrl 메서드에 필요한 것은 'file://' 접두사뿐이었습니다.
가졌다:
win.loadUrl(path.join(__dirname, "./index.html"))
다음으로 대체됨:
win.loadUrl(path.join("file://",__dirname, "./index.html"))

Webpack은 html 항목에 대한 URL에 슬래시와 역방향 슬래시를 혼합하여 사용하는 것을 방해하므로 노드의 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에 패키징 된 exe는 전혀 작동하지 않습니다.

알 겠어요. 🤣 react-router와 함께 CRA를 사용한다면 BrowerRouter가 아닌 HashRouter를 사용해야 합니다. 완료!!! 😂 https://github.com/electron-userland/electron-builder/issues/2167 참조