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：
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}\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中文網其他相關文章！
