javascript - 标准协议(protocol)路径的规则是什么？

Question

当您将自定义协议(protocol)注册为标准时，我无法理解路径解析如何在 Electron 中工作。

我有一个用于应用文件夹文件的基本自定义协议(protocol):

protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: {
                standard: true,
                secure: true,
                supportFetchAPI: true,
                corsEnabled: true,
                bypassCSP: true
            } }
])
app.on('ready', e=> {

    protocol.registerFileProtocol('app', 
                (i,o)=> console.log(i.url)||
                        o({path: path.resolve(__dirname, i.url)})
    )
    let win = new BrowserWindow()
    win.loadURL(`app://tabbed-window.html`)

}

    <script type="module" src="utils/DOM.js"></script>

    <link rel="import" 
          href="/components/Window.html" />

    <link rel="stylesheet" type="text/css"
          href="./components/Tab.css" />


    <link rel="import" 
          href="../components/icon.html" 
            data-="themes/icons/app.svg" 
            data-fas="themes/icons/fa-solid.svg" 
            data-far="themes/icons/fa-regular.svg"
            data-fab="themes/icons/fa-brands.svg" />

在日志中，我在主 .html 文件之后有一个前导斜杠，因此嵌套的资源相关路径是错误的，将 html 文件作为文件夹获取，无论每个文件如何请求(.// 甚至 ../ 不要' t 避免使用 .html/文件夹!!)

{
  method: 'GET',
  url: 'app://tabbed-window.html/',
  referrer: '',
  headers: {
    Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
  }
}
{
  method: 'GET',
  url: 'app://tabbed-window.html/utils/DOM.js',
  referrer: '',
  headers: {
    Origin: 'app://tabbed-window.html',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) termos/0.3.0 Chrome/80.0.3987.163 Electron/8.2.3 Safari/537.36',
    'Sec-Fetch-Dest': 'script',
    Accept: '*/*'
  }
}
{
  method: 'GET',
  url: 'app://tabbed-window.html/components/Window.html',
  referrer: '',
  headers: {
    Origin: 'app://tabbed-window.html',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) termos/0.3.0 Chrome/80.0.3987.163 Electron/8.2.3 Safari/537.36',
    'Sec-Fetch-Dest': 'unknown',
    Accept: '*/*'
  }
}
{
  method: 'GET',
  url: 'app://tabbed-window.html/components/Tab.css',
  referrer: '',
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) termos/0.3.0 Chrome/80.0.3987.163 Electron/8.2.3 Safari/537.36',
    'Sec-Fetch-Dest': 'style',
    Accept: 'text/css,*/*;q=0.1'
  }
}
{
  method: 'GET',
  url: 'app://tabbed-window.html/components/icon.html',
  referrer: '',
  headers: {
    Origin: 'app://tabbed-window.html',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) termos/0.3.0 Chrome/80.0.3987.163 Electron/8.2.3 Safari/537.36',
    'Sec-Fetch-Dest': 'unknown',
    Accept: '*/*'
  }
}

Answer 1

Electron 中的自定义协议(protocol)与 file://协议(protocol)具有相同的效果，其中文件是从本地文件系统而不是相对应用程序路径提供的。

总而言之，当您使用相对路径 (../../) 时，URL 会相对于您的本地文件系统发生变化，例如:file:///absolute/path/to/file。绝对路径使用基本 href 路径(如果是 Angular )。

可以使用协议(protocol) api 的拦截方法拦截指向您的 Assets 的请求。