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.

1. Buat projek Vue
   Pertama, kita perlu mencipta projek asas Vue. Jalankan arahan berikut dalam terminal:

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

2. Tambah kebergantungan SSR
   Seterusnya, kita perlu menambah kebergantungan berkaitan SSR. Masukkan arahan berikut dalam terminal:

npm install --save vue vue-server-renderer express

• vue: pergantungan rangka kerja Vue itu sendiri.
• vue-server-renderer: Vue's SSR renderer.
• express: rangka kerja aplikasi web berdasarkan Node.js.

Arahan di atas akan memasang kebergantungan secara automatik ke dalam fail package.json projek.

3. Ubah suai fail masukan Vue
   Dalam direktori 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.

4. Buat skrip pelayan
   Dalam direktori akar projek, kita perlu mencipta skrip pelayan. Buat fail bernama 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.

5. Bina dan mulakan pelayan
   Jalankan arahan berikut dalam terminal:

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 serveArahan 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!