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文件，内容如下：
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}`)})
登录后复制
修改构建配置：
在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的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2631158.html
