So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt

<Vorlage>
  <div Klasse="Skelett-Home">
    <div>Wird geladen...</div>
  </div>
</Vorlage>
 
<Stil>
.skeleton-home {
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrundfarbe: #eaeaea;
}
</Stil>

<Vorlage>
  <div id="app">
    <!-- Stammkomponente-->
    <home style="display:none" id="homeSkeleton"></home>
  </div>
</Vorlage>
<Skript>
Home aus „./home.skeleton.vue“ importieren
Standard exportieren{
  Komponenten:
    heim
  }
}
</Skript>
<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
}
*{
  Polsterung: 0;
  Rand: 0;
}
</Stil>

//Eintragsdatei Vue von 'vue' importieren
App aus „./App.vue“ importieren
lass Skelett = neues Vue({
  rendern(h) {
    return h(App)
  }
})
Standardskelett exportieren

„streng verwenden“;
 
/* */
 
var isJS = function (Datei) { return /\.js(\?[^.]+)?$/.test(Datei); };
 
var ref = erfordern('Kreide');
var rot = ref.rot;
var gelb = ref.gelb;
 
var Präfix = "[vue-server-renderer-webpack-plugin]";
var warn = exports.warn = function (msg) { return console.error(red((Präfix + " " + msg + "\n"))); };
var tip = exports.tip = Funktion (msg) { return console.log(gelb((Präfix + " " + msg + "\n"))); };
 
var validieren = Funktion (Compiler) {
  wenn (Compiler.Optionen.Ziel !== 'Knoten') {
    warnen('webpack-Konfiguration ‚Ziel‘ sollte „Knoten“ sein.');
  }
 
  wenn (Compiler.Optionen.Ausgabe && Compiler.Optionen.Ausgabe.Bibliotheksziel !== 'commonjs2') {
    warnen('webpack-Konfiguration ‚output.libraryTarget‘ sollte „commonjs2“ sein.');
  }
 
  wenn (!compiler.options.externals) {
    Tipp(
      'Es wird empfohlen, Abhängigkeiten im Server-Build auszulagern für ' +
      „Bessere Build-Leistung.“
    );
  }
};
 
var VueSSRServerPlugin = Funktion VueSSRServerPlugin (Optionen) {
  wenn (Optionen === void 0) Optionen = {};
 
  diese.Optionen = Objekt.Zuweisen({
    Dateiname: „vue-ssr-server-bundle.json“
  }, Optionen);
};
 
VueSSRServerPlugin.prototype.apply = Funktion anwenden (Compiler) {
    var dies$1 = dies;
 
  validieren (Compiler);
 
  compiler.plugin('emit', Funktion (Kompilierung, cb) {
    var stats = Zusammenstellung.getStats().toJson();
    var entryName = Objekt.keys(stats.entrypoints)[0];
    var entryAssets = stats.entrypoints[entryName].assets.filter(isJS);
 
    wenn (entryAssets.length > 1) {
      neuen Fehler werfen (
        "Serverseitiges Bundle sollte eine einzelne Eintragsdatei haben. " +
        „Vermeiden Sie die Verwendung von CommonsChunkPlugin in der Serverkonfiguration.“
      )
    }
 
    var entry = Eintragsassets[0];
    wenn (!Eintrag || Typ des Eintrags !== 'Zeichenfolge') {
      neuen Fehler werfen (
        ("Eintrag \"" + entryName + "\" nicht gefunden. Haben Sie die richtige Eingabeoption angegeben?")
      )
    }
 
    var Bündel = {
      Eintrag: Eintrag,
      Dateien: {},
      Karten: {}
    };
 
    stats.assets.forEach(Funktion (Asset) {
      wenn (asset.name.match(/\.js$/)) {
        bundle.files[asset.name] = Zusammenstellung.assets[asset.name].source();
      } sonst wenn (asset.name.match(/\.js\.map$/)) {
        bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source());
      }
      // nichts anderes für den Server ausgeben
      lösche compilation.assets[asset.name];
    });
 
    var json = JSON.stringify(bundle, null, 2);
    var Dateiname = this$1.Optionen.Dateiname;
 
    Zusammenstellung.assets[Dateiname] = {
      Quelle: Funktion () { return json; },
      Größe: Funktion () { return json.Länge; }
    };
 
    cb();
  });
};
 
module.exports = VueSSRServerPlugin;

„streng verwenden“
 
const Pfad = require('Pfad')
const nodeExternals = erfordern('webpack-node-externals').
const VueSSRServerPlugin = erfordern('../skeleton/plugin/server-plugin')
 
modul.exporte = {
  // Dadurch kann Webpack dynamische Importe auf eine für Node geeignete Weise verarbeiten.
  // Und auch beim Kompilieren von Vue-Komponenten,
  // Weisen Sie „vue-loader“ an, serverorientierten Code zu liefern.
  Ziel: "Knoten",
 
  // Unterstützung für Quellzuordnungen für das Bundle-Renderer-Devtool bereitstellen: 'source-map',
 
  // Verweisen Sie auf den Eintrag in der Servereintragsdatei der Anwendung: path.resolve(__dirname, '../skeleton/skeleton-entry.js'),
 
  Ausgabe: {
    Pfad: path.resolve(__dirname, '../skeleton'), // Verzeichnis der generierten Dateien publicPath: '/skeleton/',
    Dateiname: '[name].js',
    libraryTarget: 'commonjs2' // Dies weist das Server-Bundle an, Node-Style-Exporte zu verwenden
  },
 
  Modul: {
    Regeln:
      {
        Test: /\.vue$/,
        Lader: „vue-loader“,
        Optionen:
          Compileroptionen: {
            preserveWhitespace:false
          }
        }
      },
      {
        Test: /\.css$/,
        verwenden: ['vue-style-loader', 'css-loader']
      }
    ]
  },
 
  Leistung:
    Hinweise: falsch
  },
 
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // Anwendungsabhängigkeitsmodule externalisieren. Kann Server-Builds beschleunigen,
  // und erstelle eine kleinere Bundle-Datei.
  Externe: nodeExternals({
    // Externalisieren Sie nicht die Abhängigkeiten, die Webpack verarbeiten muss.
    // Sie können hier weitere Dateitypen hinzufügen. Beispielsweise werden *.vue-Raw-Dateien nicht verarbeitet,
    // Sie sollten auch abhängige Module, die „global“ ändern (wie etwa Polyfills), auf die Whitelist setzen. Allowlist: /\.css$/
  }),
 
  // Dies ist ein Plugin, das die gesamte Ausgabe des Servers // in einer einzigen JSON-Datei zusammenfasst.
  // Wenn der Dateiname nicht konfiguriert ist, lautet der Standarddateiname „vue-ssr-server-bundle.json“.
  Plugins: [
    neues VueSSRServerPlugin({
      Dateiname: „skeleton.json“
    })
  ]
}

  "Skripte": {
    "Skelett erstellen": "webpack --progress --config build/webpack.skeleton.conf.js",
    "fill-skeleton": "Knoten ./skeleton/skeleton.js"
  }

npm führt „create-skeleton“ aus

//Füge den generierten Skeleton.json-Inhalt in die Vorlagendatei ein const fs = require('fs')
const { lösen } = erfordern ('Pfad')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
 
// Skelett.json lesen und Inhalt schreiben, wobei skeleton/index.html als Vorlage verwendet wird const renderer = createBundleRenderer(resolve(__dirname, '../skeleton/skeleton.json'), {
  Vorlage: fs.readFileSync(auflösen(__dirname, '../skeleton/index.html'), 'utf-8')
})
// Schreibe den Inhalt der vorherigen Vorlage in die Vorlagendatei 'index.html' im Stammverzeichnis
renderer.renderToString({}, (err, html) => {
  wenn (Fehler) {
    returniere console.log(err)
  }
  console.log('Rendern abgeschlossen!')
  fs.writeFileSync('index.html', html, 'utf-8')
})

"fill-skeleton": "Knoten ./skeleton/skeleton.js"