Bagaimana untuk melakukan ssr dengan Uniapp

UniApp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan rangka kerja Vue.js, membenarkan pembangun membina aplikasi iOS, Android, H5 dan program mini pada masa yang sama. Oleh itu, dalam senario dengan keperluan prestasi tinggi, anda mungkin perlu menggunakan SSR (Server-Side Rendering) untuk menyelesaikan masalah prestasi pemaparan Artikel ini akan membincangkan cara melaksanakan SSR dalam UniApp.

Apakah itu SSR?
SSR melengkapkan pemaparan pertama halaman pada bahagian pelayan, mengembalikan kandungan HTML statik kepada penyemak imbas, membenarkan penyemak imbas melihat bahawa terdapat HTML yang tersedia, dan kemudian memaparkan halaman tersebut. Manfaat SSR ialah ia boleh membuat pemuatan pertama lebih cepat dan meningkatkan pengalaman pengguna.

Kaedah pelaksanaan SSR UniApp?
Kaedah pelaksanaan SSR UniApp adalah berdasarkan kaedah pelaksanaan SSR Vue.js, yang memerlukan penggunaan beberapa pemalam SSR dalam ekosistem Vue.js.
Dua pemalam Vue.js diperkenalkan di bawah:

1. Vue-router: digunakan untuk pengurusan penghalaan dan mengaitkan permintaan dengan komponen yang sepadan.
2. Vue-server-renderer: Digunakan untuk memaparkan rentetan HTML aplikasi dalam persekitaran Node.js, menjana fail HTML untuk mewakili keadaan semasa aplikasi.

Kaedah pelaksanaan khusus adalah seperti berikut:

1. Pasang Vue-router dan Vue-server-renderer:

   npm install vue-router vue-server-renderer --save

2. Buat fail masukan SSR:
   Buat fail entri-ssr.js di bawah src dengan kandungan berikut:

   import createApp from './main'
   
   export default context => {
     return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    const { url } = context
    const fullPath = router.resolve(url).route.fullPath
   
    if (fullPath !== url) {
      return reject({ url: fullPath })
    }
   
    // 设置 server router 的位置
    router.push(url)
   
    // 等待 router 将组件渲染完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
   
      Promise.all(
        matchedComponents.map(Component => {
          if (Component.asyncData) {
            return Component.asyncData({
              store,
              route: router.currentRoute
            })
          }
        })
      )
        .then(() => {
          context.state = store.state
          resolve(app)
        })
        .catch(reject)
    }, reject)
     })
   }

3. Buat pelayan SSR:
   Dalam direktori akar Cipta fail server.js dengan kandungan berikut:

   const Koa = require('koa')
   const path = require('path')
   const fs = require('fs')
   const koaStatic = require('koa-static')
   const { createBundleRenderer } = require('vue-server-renderer')
   const serverBundle = require('./dist/vue-ssr-server-bundle.json')
   const clientManifest = require('./dist/vue-ssr-client-manifest.json')
   const template = fs.readFileSync(path.join(__dirname, './index.ssr.html'), 'utf-8')
   
   const app = new Koa()
   const renderer = createBundleRenderer(serverBundle, {
     runInNewContext: false,
     template,
     clientManifest
   })
   
   // 静态资源
   app.use(koaStatic(path.join(__dirname, './dist')))
   
   app.use(async (ctx, next) => {
     const context = { url: ctx.url }
   
     const html = await renderer.renderToString(context)
    .catch(err => {
      if (err.code === 404) {
        ctx.status = 404
        ctx.body = '404 Page Not Found'
      } else {
        ctx.status = 500
        ctx.body = '500 Internal Server Error'
        console.error(`${ctx.url}\n${err.stack}`)
      }
    })
   
     ctx.body = html
   })
   
   const port = process.env.PORT || 9090
   
   app.listen(port, () => {
     console.log(`server started at localhost:${port}`)
   })

4. Ubah suai konfigurasi binaan:
   Dalam fail vue.config.js, tambah kod berikut :

   module.exports = {
     productionSourceMap: false,
     css: {
    extract: {
      ignoreOrder: true
    }
     },
     configureWebpack: config => {
    if (process.env.UNI_SSR) {
      config.output.libraryTarget = 'commonjs2'
      config.externals = [
        /^uni-app/,
        /^@dcloudio/,
        {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue'
          }
        }
      ]
      config.plugins.push(new VueSSRServerPlugin())
    }
     }
   }

5. Ubah suai fail package.json dalam direktori akar:
   Tambah kod berikut di bawah "skrip":

   "ssr-build": "cross-env UNI_SSR=1 vue-cli-service build --mode production --target server --dest dist && vue-cli-service build --mode production --target client --dest dist",
   "ssr-start": "cross-env NODE_ENV=production node server.js"

   Laksanakan npm jalankan ssr-build untuk membina aplikasi SSR, dan kemudian jalankan npm run ssr-start untuk memulakan aplikasi.

Pada ketika ini, UniApp SS berjaya dilaksanakan.

Ringkasan
Oleh kerana struktur UniApp hampir sama dengan Vue.js, apabila melaksanakan SSR, SSR UniApp boleh dilengkapkan mengikut kaedah pelaksanaan SSR Vue.js, dan UniApp boleh dibuat melalui siri langkah Aplikasi dalam pemaparan bahagian pelayan menyokong, menghasilkan kelajuan pemuatan halaman yang lebih pantas dan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melakukan ssr dengan Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!