Uniapp怎么做ssr-uni-app-PHP中文网

Uniapp怎么做ssr

PHPz

发布： 2023-04-14 13:53:37

原创

3238人浏览过

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的插件：

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

具体实现方法如下：

安装Vue-router和Vue-server-renderer：
```
npm install vue-router vue-server-renderer --save
```
登录后复制

创建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)
  })
}

登录后复制

创建SSR服务器：
在根目录下创建server.js文件，内容如下：

JS做的焦点轮播图

156

查看详情

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}`)
})

登录后复制

修改构建配置：
在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())
 }
  }
}

登录后复制

修改根目录下的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中的应用程序支持服务器端渲染，从而达到更快的页面加载速度，提高用户体验。

以上就是Uniapp怎么做ssr的详细内容，更多请关注php中文网其它相关文章！