Wie man Pugjs auf Elektron rendert?

Question

Ich versuche, Mops auf Elektron zu verwenden.

Ich habe eine Frage meine zweite .pug Datei wird nicht korrekt gerendert, es nur den Mops-Code selbst ausgeben.

Zuerst habe ich diese Haupt-Mops-Datei, die von den main.js

doctype 
html(lang='en') 
    head 
    meta(charset='utf-8') 
    title HIMS 
    body 
    div(id="app") 
    script. 
     require('./index.js') 

dann die index.js die login.js nennen nur

const fs = require('fs'); 
const path = require('path'); 

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('href', path.join(__dirname, 'style.css')); 
document.head.appendChild(link); 

const login = path.join(__dirname, 'login.pug'); 
fs.readFile(login, 'utf8', function (err, data) { 
    if (err) { 
     return console.log(err); 
    } 
    document.getElementById('app') 
     .innerHTML = data; 
}); 

aber die .innerHTML geladen wurde, wird nur gib den Mops-Code selbst aus.

Bitte helfen, wie ich beheben kann. Ich freue mich über jeden Rat oder Hinweis wird kommen, danke.

Answer 1

Pug ist eine Sprache, die verwendet werden kann, um HTML effektiver zu schreiben. Es wird jedoch von keinem Browser unterstützt - einschließlich Chromium, das von Electron - nativ verwendet wird. Sie müssen es entweder zur Laufzeit in HTML konvertieren oder Ihre .pug Dateien in .html Dateien kompilieren (mit Task Runner Plugins wie gulp-pug für Gulp)) und laden Sie dann die erzeugten .html Dateien in Ihren Code.

Die schnellste Lösung, um Ihren Code anzuwenden ist pug.render wie folgt zu verwenden:

const fs = require('fs'); 
const path = require('path'); 
const pug = require('pug'); 

var link = document.createElement('link'); 
link.setAttribute('rel', 'stylesheet'); 
link.setAttribute('href', path.join(__dirname, 'style.css')); 
document.head.appendChild(link); 

const login = path.join(__dirname, 'login.pug'); 
fs.readFile(login, 'utf8', function (err, data) { 
    if (err) { 
     return console.log(err); 
    } 
    const htmlData = pug.render(data) 
    document.getElementById('app') 
     .innerHTML = htmlData; 
});