Detaillierte Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue

"client:build": "webpack --config scripts/webpack.client.js --watch",
"Server:Build": "webpack --config scripts/webpack.server.js --watch",

"run:all": "gleichzeitig \"npm run client:build\" \"npm run server:build\""

{
  "Name": "11.vue-ssr",
  "version": "1.0.0",
  "Beschreibung": "",
  "main": "index.js",
  "Skripte": {
    "client:dev": "webpack serve --config scripts/webpack.client.js",
    "client:build": "webpack --config scripts/webpack.client.js --watch",
    "Server:Build": "webpack --config scripts/webpack.server.js --watch",
    "run:all": "gleichzeitig \"npm run client:build\" \"npm run server:build\""
  },
  "Schlüsselwörter": [],
  "Autor": "",
  "Lizenz": "ISC",
  "Abhängigkeiten": {
    "gleichzeitig": "^5.3.0",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "vue": "^2.6.12",
    "vue-router": "^3.4.9",
    "vue-server-renderer": "^2.6.12",
    "vuex": "^3.6.0",
    "webpack-merge": "^5.7.3"
  },
  "devAbhängigkeiten": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.2"
  }
}

// Die von webpack gepackte Eintragsdatei muss die Konfiguration exportieren // webpack webpack-cli
// @babel/core Babels Kernmodul // Babel-Loader ist eine Brücke zwischen Webpack und Babel // @babel/preset-env konvertiert es6+ in eine Low-Level-Syntax // Vue-Loader Vue-Template-Compiler analysiert .vue-Dateien und kompiliert Vorlagen // Vue-Style-Loader CSS-Loader analysiert CSS-Stile und fügt sie in Stil-Tags ein, Vue-Style-Loader unterstützt serverseitiges Rendering const path = require('path');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
const VueLoaderPlugin = erforderlich('vue-loader/lib/plugin')
modul.exporte = {
    Modus: "Entwicklung",
    Ausgabe: {
        Dateiname: '[name].bundle.js', // Der Standard ist main, der Standard ist der dist-Verzeichnispfad: path.resolve(__dirname,'../dist')
    },
    Modul: {
        Regeln: [{
            Test: /\.vue$/,
            verwenden: „vue-loader“
        }, {
            Test: /\.js$/,
            verwenden: {
                Loader: 'babel-loader', // @babel/core -> voreingestellte Umgebung
                Optionen:
                    Voreinstellungen: ['@babel/preset-env'], // Sammlung von Plugins}
            },
            exclude: /node_modules/ // gibt an, dass Dateien unter node_modules nicht durchsucht werden müssen}, {
            Test: /\.css$/,
            verwenden: ['vue-style-loader', {
                Lader: "CSS-Lader",
                Optionen:
                    esModule: false, // Beachten Sie, dass vue-style-loader in Verbindung mit verwendet wird
                }
            }] // Von rechts nach links ausführen }]
    },
    Plugins: [
        neues VueLoaderPlugin() // Behoben]
}

const {merge} = erfordern('webpack-merge');
const base = erfordern('./webpack.base');
const Pfad = require('Pfad')
const HtmlWebpackPlugin = erfordern('html-webpack-plugin')
modul.exporte = merge(base,{
    Eintrag: {
        Client:Pfad.Auflösen(__Verzeichnisname, '../src/client-entry.js')
    },
    Plugins:[
        neues HtmlWebpackPlugin({
            Vorlage: Pfad.auflösen(__dirname, '../public/index.html'),
            Dateiname: „client.html“
            // Der Standardname ist index.html
        }),
    ]
})

const base = erfordern('./webpack.base')
const {merge} = erfordern('webpack-merge');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin')
const Pfad = require('Pfad')
modul.exporte = merge(base,{
    Ziel: 'Knoten',
    Eintrag: {
        server:Pfad.auflösen(__dirname, '../src/server-entry.js')
    },
    Ausgabe:{
        libraryTarget:"commonjs2" // module.exports exportieren},
    Plugins:[
        neues HtmlWebpackPlugin({
            Vorlage: Pfad.auflösen(__dirname, '../public/index.ssr.html'),
            Dateiname:'server.html',
            excludeChunks:['Server'],
            minimieren:false,
            Kunde: '/client.bundle.js'
            // Der Standardname ist index.html
        }),
    ]
})

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <div id="app"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <!--vue-ssr-outlet-->

    <!-- ejs-Vorlage -->
    <script src="<%=htmlWebpackPlugin.options.client%>"></script>
</body>
</html>

<!--vue-ssr-outlet--> ist die feste Slot-Position, die vom Server zum Rendern des DOM verwendet wird. <%=htmlWebpackPlugin.options.client%> füllt die Variablen von htmlwebpackplugin

importiere Vue von „vue“;
App aus „./App.vue“ importieren
importiere createRouter aus './router.js'
importiere createStore aus „./store.js“
// Der Zweck der Konvertierung des Eintrags in eine Funktion besteht darin, bei jedem Rendern des Servers eine neue Instanz über diese Factory-Funktion zurückzugeben und so sicherzustellen, dass jeder Besucher seine eigene Instanz erhalten kann. export default () => {
    const router = createRouter();
    const store = erstelleStore()
    const app = new Vue({
        Router,
        speichern,
        rendern: h => h(App)
    });
    Rückgabe { App, Router, Store }
}

<Vorlage>
  <div id="app">
    <router-link to="/">foo</router-link>
    <router-link to="/bar">Bar</router-link>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>
<Skript>
Standard exportieren {};
</Skript>

<Vorlage>
  <div>
    {{ $store.state.name }}  
   
  </div>
</Vorlage>

<Stil scoped="true">
div {
  Hintergrund: rot;
}
</Stil>

<Skript>
Standard exportieren {
    asyncData(store){ //Methode wird auf dem Server ausgeführt, aber diese Methode wird auf der Backend-Konsole ausgeführt.log('Serveraufruf')
       // axios.get('/Serverpfad')
        returniere Promise.resolve('Erfolg')
    },
    mounted(){ // Browser führt aus, Backend ignoriert}
}
</Skript>

<Vorlage>
    <div @click="anzeigen">foo</div>
</Vorlage>
<Skript>
Standard exportieren {
    Methoden:{
        zeigen(){
            Alarm(1)
        }
    }
}
</Skript>

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
importiere Foo aus './components/Foo.vue'
Importiere Bar aus './components/Bar.vue'
Vue.use(VueRouter); // Zwei globale Komponenten werden intern bereitgestellt Vue.component()


//Jeder, der auf den Server zugreift, muss ein Routing-System generieren export default ()=>{
    let router = neuer VueRouter({
        Modus: „Verlauf“,
        Routen:[
            {Pfad:'/',Komponente:Foo},
            {path:'/bar',component:Bar}, // Lazy Loading, lade die entsprechende Komponente dynamisch entsprechend dem Pfad {path:'*',component:{
                rendern:(h)=>h('div',{},'404')
            }}
        ]
    });
    Rückrouter;
}




//Zwei Möglichkeiten zur Front-End-Routing-Hash-Historie

// Hash # 

// Routing dient dazu, verschiedene Komponenten entsprechend unterschiedlicher Pfade zu rendern. Das Merkmal des Hash-Werts besteht darin, dass eine Änderung des Hash-Werts nicht dazu führt, dass die Seite erneut gerendert wird. Wir können die Änderung des Hash-Werts überwachen, um die entsprechende Komponente anzuzeigen (Verlauf kann generiert werden). Das Merkmal von hashApi besteht darin, dass es hässlich ist (der Server kann den Hash-Wert nicht abrufen).

// historyApi Die API von H5 ist wunderschön. Das Problem besteht darin, dass beim Aktualisieren eine 404-Fehlermeldung auftritt. 

importiere Vue von „vue“;
importiere Vuex von „vuex“;

Vue.use(Vuex);
//Verwenden Sie vuex auf dem Server, um Daten im globalen Variablenfenster zu speichern, und ersetzen Sie die vom Server gerenderten Daten durch die vom Browser gerenderten Daten. Export Standard ()=>{
    let store = neuer Vuex.Store({
        Zustand:{
            Name: „Zhufeng“
        },
        Mutationen:
            changeName(Status,Nutzlast){
                Zustand.Name = Nutzlast
            }
        },
        Aktionen: {
            Änderungsname({commit}){// store.dispatch('Änderungsname')
                returniere neues Promise((lösen,ablehnen)=>{
                    setzeTimeout(() => {
                        commit('Name ändern','jiangwen');
                        lösen();
                    }, 5000);
                })
            }
        }

    });

    wenn(Fenstertyp!='undefined' && Fenster.__INITIAL_STATE__){
        // Der Browser beginnt mit dem Rendern // Synchronisiere die gerenderten Ergebnisse des Backends mit der Kernmethode im Front-End vuex store.replaceState(window.__INITIAL_STATE__); // Ersetze es durch die vom Server geladenen Daten}
    Rückgabegeschäft;
}

importiere createApp aus „./app.js“;
let {app} = erstelleApp();
app.$mount('#app'); // Clientseitiges Rendering kann client-entry.js direkt verwenden

// Servereintrag importiere createApp von './app.js';


// Serverseitiges Rendering kann eine Funktion zurückgeben export default (context) => { // Der Server übergibt das URL-Attribut beim Aufruf der Methode // Diese Methode wird auf dem Server aufgerufen // Das Routing ist eine asynchrone Komponente, daher muss ich hier warten, bis die Route geladen ist const { url } = context;
    returniere neues Promise((auflösen, ablehnen) => { // renderToString()
        let { app, router, store } = createApp(); // vue-router
        router.push(url); // Zeigt einen permanenten Sprung/Pfad an router.onReady(() => { // Wartet, bis die Route zum Sprung abgeschlossen ist und die Komponente zum Auslösen bereit ist const matchComponents = router.getMatchedComponents(); // /abc


            if (matchComponents.length == 0) { //Keine Übereinstimmung mit der Front-End-Route return reject({ code: 404 });
            } anders {
                // matchComponents bezieht sich auf alle Komponenten, die mit der Route übereinstimmen (Komponenten auf Seitenebene)
                Versprechen.alles(matchComponents.map(Komponente => {
                    if (component.asyncData) { // Der Server findet die asyncData beim Rendern standardmäßig in der Komponente auf Seitenebene, erstellt außerdem ein Vuex auf dem Server und übergibt es an asyncData
                        gibt Komponente.asyncData(Store) zurück
                    }
                })).then(()=>{ // Standardmäßig wird eine Variable unter dem Fenster generiert. Dies geschieht standardmäßig // "window.__INITIAL_STATE__={"name":"jiangwen"}"
                    context.state = store.state; // Nachdem der Server ausgeführt wurde, wird der letzte Status in store.state gespeichert resolve(app); // app ist die Instanz, die die Daten erhalten hat })
            }
        })
    })



    // App entspricht newVue und wird nicht vom Router verwaltet. Ich hoffe, warten zu können, bis der Router springt, bevor ich serverseitiges Rendering durchführe // Wenn ein Benutzer eine nicht vorhandene Seite besucht, wie kann die Front-End-Route angepasst werden // Jedes Mal kann eine neue Anwendung generiert werden}

// Wenn der Benutzer die Leiste besucht: Ich führe das serverseitige Rendering direkt auf dem Server durch und das gerenderte Ergebnis wird an den Browser zurückgegeben. Der Browser lädt das JS-Skript, lädt das JS-Skript entsprechend dem Pfad und rendert die Leiste erneut

const Koa = erfordern('koa');
const app = new Koa();
const Router = erforderlich('koa-router');
const router = neuer Router();
const VueServerRenderer = erforderlich('vue-server-renderer').
const static = erforderlich('koa-static')

const fs = erfordern('fs');
const Pfad = require('Pfad')
const serverBundle = fs.readFileSync(Pfad.resolve(__dirname, 'dist/server.bundle.js'), 'utf8')
const template = fs.readFileSync(Pfad.resolve(__dirname, 'dist/server.html'), 'utf8');


// Erstellen Sie einen Renderer basierend auf der Instanz und übergeben Sie das gepackte JS und die Vorlagendatei const render = VueServerRenderer.createBundleRenderer(serverBundle, {
    Vorlage
})

// Anfrage an localhost:3000/ Übergeben Sie diese entsprechend dem URL-Parameter der Anfrage -》 {url:ctx.url} an serverBundle. Anschließend wird eine Seite mit der vollständigen DOM-Dekonstruktion der Route entsprechend dem gepackten .js-Routingsystem auf dem Server gerendert. router.get('/', async (ctx) => {
    console.log('springen')
    ctx.body = warte auf neues Promise((lösen, ablehnen) => {
        render.renderToString({url:ctx.url},(err, html) => { // Wenn CSS wirksam werden soll, können Sie die Rückrufmethode nur verwenden, if (err) reject(err);
            lösen (html)
        })
    })
    // const html = await render.renderToString(); // Einen String generieren // console.log(html)
})

// Wenn der Benutzer einen Serverpfad besucht, der nicht existiert, kehre ich zu Ihrer Homepage zurück. Wenn Sie über das Front-End-JS rendern, wird die Komponente entsprechend dem Pfad erneut gerendert. // Solange der Benutzer aktualisiert, sendet er eine Anfrage an den Server. router.get('/(.*)', async (ctx)=>{
    console.log('springen')
    ctx.body = warte auf neues Promise((lösen, ablehnen) => {
        render.renderToString({url:ctx.url},(err, html) => { // Zurück nach dem Rendern über serverseitiges Rendering if (err && err.code == 404) resolve(`nicht gefunden`);
            konsole.log(html)
            lösen (html)
        })
    })
})


// Wenn der Client eine Anfrage sendet, sucht er zuerst im „dist“-Verzeichnis app.use(static(path.resolve(__dirname,'dist'))); // Sequenzproblem app.use(router.routes());

// Stellen Sie sicher, dass Sie Ihre definierte Route verwenden, bevor Sie nach statischen Dateien suchen app.listen(3000);

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <!--vue-ssr-outlet-->

    <!-- ejs-Vorlage -->
    <script src="/client.bundle.js"></script>
</body>
</html>

"run:all": "gleichzeitig \"npm run client:build\" \"npm run server:build\""