PHP前端开发

Uniapp怎么做ssr

百变鹏仔 4周前 (11-20) #uniapp
文章标签 怎么做

uniapp是一个基于vue.js框架的跨平台应用开发框架,允许开发者同时构建ios、android、h5和小程序应用。所以,在性能要求较高的场景中可能需要使用ssr(server-side rendering,即服务器端渲染)解决渲染性能问题,本篇文章将讨论在uniapp中如何实现ssr。

SSR是什么?
SSR是在服务器端完成页面的首次渲染,将静态的HTML内容返回给浏览器,让浏览器看到已经有了可用的HTML,进而渲染出页面。SSR的好处是可以让首次加载的速度更快,提高用户体验。

UniApp的SSR实现方法?
UniApp的SSR实现方法基于Vue.js的SSR实现方法,这需要使用一些Vue.js生态中的SSR插件。
下面引入两个Vue.js的插件:

  1. Vue-router:用于路由管理,将请求与对应的组件关联起来。
  2. Vue-server-renderer:用于在Node.js环境中渲染应用程序的HTML字符串,生成HTML文件来表示应用程序的当前状态。

具体实现方法如下:

  1. 安装Vue-router和Vue-server-renderer:

    npm install vue-router vue-server-renderer --save
  2. 创建SSR入口文件:
    在src下创建entry-ssr.js文件,内容如下:

    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. 创建SSR服务器:
    在根目录下创建server.js文件,内容如下:

    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}${err.stack}`)   } })  ctx.body = html})const port = process.env.PORT || 9090app.listen(port, () => {  console.log(`server started at localhost:${port}`)})
  4. 修改构建配置:
    在vue.config.js文件中,添加如下代码:

    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. 修改根目录下的package.json文件:
    在"scripts"下添加如下代码:

    "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"

    执行npm run ssr-build构建SSR应用程序,然后执行npm run ssr-start启动应用程序。

至此,UniApp SS是执行成功的。

总结
因为UniApp的结构与Vue.js非常相似,在实现SSR的时候,根据Vue.js的SSR实现方法就能完成UniApp的SSR,通过一系列步骤就能让UniApp中的应用程序支持服务器端渲染,从而达到更快的页面加载速度,提高用户体验。