egg-vue-ssr/app/extend/application.js

use vue to work on egg

const isProd = process.env.NODE_ENV === 'production'
const vueRender = require('vue-server-renderer')
const fs = require('fs')

const getHtml = function (content, {devPro, pro, proFileName}, callback) {
	if (isProd || !devPro.includes(pro)) {
		template = fs.readFileSync(`app/web/${proFileName}/index.html`,'utf-8')
		callback(template)
	} else {
		template = fs.readFileSync(`.elscms/${proFileName}/index.html`,'utf-8')
		callback(template)
	}
}

const getHtmlSsr = async (content, {devPro, pro, proFileName}) => {
	if (isProd || !devPro.includes(pro)) {
		let serverBundle, template, clientBundle
		serverBundle = JSON.parse(fs.readFileSync(`app/web/${proFileName}/vue-ssr-server-bundle.json`,'utf-8'))
		template = fs.readFileSync(`app/web/${proFileName}/ssr.html`,'utf-8')
		clientBundle = JSON.parse(fs.readFileSync(`app/web/${proFileName}/vue-ssr-client-manifest.json`,'utf-8'))

		let render = vueRender.createBundleRenderer(serverBundle,{
			template,
			clientManifest:clientBundle,
			runInNewContext:false,
			shouldPrefetch: (file, type) => {
				return false
			},
			shouldPreload: () => {
				return false
			},
		})
		return await render.renderToString(content)
	} else {
		let serverBundle, template, clientBundle
		serverBundle = JSON.parse(fs.readFileSync(`.elscms/${proFileName}/server.json`,'utf-8').toString())
		template = fs.readFileSync(`web/pro/${pro}/ssr.html`,'utf-8')
		clientBundle = JSON.parse(fs.readFileSync(`.elscms/${proFileName}/client.json`,'utf-8').toString())
		let render = vueRender.createBundleRenderer(serverBundle,{
			template, 
			clientManifest:clientBundle,
			runInNewContext:false,
			shouldPrefetch: (file, type) => {
				return false
			},
			shouldPreload: () => {
				return false
			},
		})
		return await render.renderToString(content)
	}
}

module.exports = {
	vue(content, callback) {
		let pro = content.url.split('/')[1] || 'index'
		let proFileName = pro + 'web'
		getHtml(
			content,
			{
				devPro: this.config.devPro || [],
				pro,
				proFileName
			},
			callback
		)
	},
	async vuessr(content) {
		const pro = content.url.split('/')[1] || 'index'
		const proFileName = pro + 'web'
		const vueSsr = this.config.vueSsr
		const proSeo = vueSsr.pro[pro] || {}
		
		content.url = content.url.replace(`/${pro}`, '')
		content.title = proSeo.title || vueSsr.title
		content.description = proSeo.description || vueSsr.description
		content.keywords = proSeo.keywords || vueSsr.keywords
		return await getHtmlSsr(
			content,
			{
				devPro: this.config.devPro || [],
				pro,
				proFileName
			}
		)
	}
}