Rumah > Artikel > hujung hadapan web > Amalan cemerlang Vue - melaksanakan pemaparan SSR daripada 0 hingga 1
Dalam pembangunan web, rendering SSR (Server Side Rendering) ialah teknologi yang sangat kritikal. Ia boleh melengkapkan pemaparan awal halaman pada pelayan, dan kemudian menyerahkan fail HTML yang diberikan kepada klien untuk paparan. Berbanding dengan pemaparan sisi pelanggan (CSR) tradisional, pemaparan SSR boleh meningkatkan kelajuan pemuatan skrin pertama halaman web, keupayaan pengoptimuman enjin carian, dsb. Artikel ini akan memperkenalkan cara melaksanakan pemaparan SSR melalui rangka kerja Vue.
vue create my-ssr-app
Dengan arahan ini, kita boleh mencipta projek asas Vue dengan cepat, dan kemudian masukkan direktori projek melalui arahan:
cd my-ssr-app
npm install --save vue vue-server-renderer express
Arahan di atas akan memasang kebergantungan secara automatik ke dalam fail package.json
projek.
src
, kita boleh mencari fail main.js
, iaitu fail masukan rangka kerja Vue. Kami perlu membuat pengubahsuaian untuk menyokong pemaparan SSR. Pertama, kita perlu menukar tika Vue kepada fungsi kilang supaya tika baharu boleh dibuat untuk setiap permintaan semasa SSR. Tukar yang asal: new Vue({ render: h => h(App), }).$mount('#app')
kepada:
export function createApp() { return new Vue({ render: h => h(App) }) }
Kemudian, kita perlu mengeksport fungsi createApp
, yang akan digunakan semasa membuat skrip pelayan nanti.
server.js
dalam direktori akar projek. Dalam fail ini, kita perlu mengimport kebergantungan yang berkaitan, dan kemudian mencipta pelayan ringkas: const express = require('express') const server = express() const { createBundleRenderer } = require('vue-server-renderer') const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json')) const template = require('fs').readFileSync('./index.html', 'utf-8') server.use('/dist', express.static('./dist')) server.get('*', (req, res) => { const context = { url: req.url } renderer.renderToString(context, (err, html) => { if (err) { console.error(err) res.status(500).end('Internal Server Error') return } res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`)) }) }) server.listen(3000, () => { console.log('Server running at http://localhost:3000') })
Kod ini melaksanakan pelayan Express ringkas, yang akan memindahkan fail statik dalam direktori ./dist
Fail didedahkan di bawah laluan /dist
dan untuk semua permintaan laluan (*
), berkas pelayan dibaca daripada fail createBundleRenderer
menggunakan kaedah vue-ssr-server-bundle.json
dan teks HTML yang diberikan dipetakan ke templat HTML asas , dan kembalikan keputusan akhir kepada pelanggan.
npm run build npm run serve
Antaranya, arahan npm run build
akan membina kod dalam src
direktori sebagai berkas pelayan dan berkas pelanggan, dan simpan hasil terbina dalam direktori dist
. npm run serve
Arahan akan memulakan pelayan dan mendengar pada port 3000. Masukkan http://localhost:3000
dalam penyemak imbas untuk mengakses halaman yang diberikan SSR.
Pada ketika ini, kami telah menyelesaikan latihan pemaparan Vue SSR yang mudah. Sudah tentu, terdapat banyak operasi khusus dan butiran pemaparan SSR yang memerlukan pemahaman dan amalan yang mendalam Artikel ini hanya menyediakan contoh pengenalan asas. Saya harap artikel ini dapat membantu semua orang menguasai pemaparan Vue SSR.
Atas ialah kandungan terperinci Amalan cemerlang Vue - melaksanakan pemaparan SSR daripada 0 hingga 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!