fix(vue-renderer): fix meta injection when ssr renderer generates a spa page (#7439)

This commit is contained in:
Pim 2020-06-10 17:26:50 +02:00 committed by GitHub
parent c48a834b98
commit df7e1ad3a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 37 additions and 23 deletions

View File

@ -61,7 +61,7 @@
"node-fetch": "^2.6.0",
"vue": "^2.6.11",
"vue-client-only": "^2.0.0",
"vue-meta": "^2.3.4",
"vue-meta": "^2.4.0",
"vue-no-ssr": "^1.1.1",
"vue-router": "^3.3.2",
"vuex": "^3.4.0"

View File

@ -16,7 +16,7 @@
"unfetch": "^4.1.0",
"vue": "^2.6.11",
"vue-client-only": "^2.0.0",
"vue-meta": "^2.3.4",
"vue-meta": "^2.4.0",
"vue-no-ssr": "^1.1.1",
"vue-router": "^3.3.2",
"vue-template-compiler": "^2.6.11",

View File

@ -14,7 +14,7 @@
"fs-extra": "^8.1.0",
"lru-cache": "^5.1.1",
"vue": "^2.6.11",
"vue-meta": "^2.3.4",
"vue-meta": "^2.4.0",
"vue-server-renderer": "^2.6.11"
},
"publishConfig": {

View File

@ -114,7 +114,11 @@ export default class SSRRenderer extends BaseRenderer {
// Inject head meta
// (this is unset when features.meta is false in server template)
const meta = renderContext.meta && renderContext.meta.inject()
const meta = renderContext.meta && renderContext.meta.inject({
isSSR: renderContext.nuxt.serverRendered,
ln: this.options.dev
})
if (meta) {
HEAD += meta.title.text() + meta.meta.text()
}
@ -143,12 +147,14 @@ export default class SSRRenderer extends BaseRenderer {
HEAD += renderContext.renderStyles()
if (meta) {
const prependInjectorOptions = { pbody: true }
const BODY_PREPEND =
meta.meta.text({ pbody: true }) +
meta.link.text({ pbody: true }) +
meta.style.text({ pbody: true }) +
meta.script.text({ pbody: true }) +
meta.noscript.text({ pbody: true })
meta.meta.text(prependInjectorOptions) +
meta.link.text(prependInjectorOptions) +
meta.style.text(prependInjectorOptions) +
meta.script.text(prependInjectorOptions) +
meta.noscript.text(prependInjectorOptions)
if (BODY_PREPEND) {
APP = `${BODY_PREPEND}${APP}`
@ -238,17 +244,19 @@ export default class SSRRenderer extends BaseRenderer {
}
if (meta) {
const appendInjectorOptions = { body: true }
// Append body scripts
APP += meta.meta.text({ body: true })
APP += meta.link.text({ body: true })
APP += meta.style.text({ body: true })
APP += meta.script.text({ body: true })
APP += meta.noscript.text({ body: true })
APP += meta.meta.text(appendInjectorOptions)
APP += meta.link.text(appendInjectorOptions)
APP += meta.style.text(appendInjectorOptions)
APP += meta.script.text(appendInjectorOptions)
APP += meta.noscript.text(appendInjectorOptions)
}
// Template params
const templateParams = {
HTML_ATTRS: meta ? meta.htmlAttrs.text(true /* addSrrAttribute */) : '',
HTML_ATTRS: meta ? meta.htmlAttrs.text(renderContext.nuxt.serverRendered /* addSrrAttribute */) : '',
HEAD_ATTRS: meta ? meta.headAttrs.text() : '',
BODY_ATTRS: meta ? meta.bodyAttrs.text() : '',
HEAD,

View File

@ -131,7 +131,8 @@ describe('basic generate', () => {
const html = window.document.body.innerHTML
const metas = window.document.getElementsByTagName('meta')
expect(window.document.title).toBe('My title - Nuxt.js')
expect(metas[0].getAttribute('content')).toBe('my meta')
expect(metas[0].getAttribute('data-n-head')).toBe('ssr')
expect(metas[1].getAttribute('content')).toBe('my meta')
expect(html).toContain('<div><h1>I can haz meta tags</h1></div>')
})
@ -195,6 +196,10 @@ describe('basic generate', () => {
test('/redirect should not be server-rendered', async () => {
const { body: html } = await rp(url('/redirect'))
expect(html).toContain('<div id="__nuxt"></div>')
// vue-meta should also not indicate ssr
expect(html).toContain('<html>')
expect(html).toContain('<meta data-n-head="1" charset="utf-8">')
})
test('/redirect -> check redirected source', async () => {

View File

@ -87,7 +87,7 @@ describe('basic ssr', () => {
expect(html).toContain('<script data-n-head="ssr" src="/body.js" data-body="true">')
const metas = window.document.getElementsByTagName('meta')
expect(metas[0].getAttribute('content')).toBe('my meta')
expect(metas[1].getAttribute('content')).toBe('my meta')
expect(consola.log).toHaveBeenCalledWith('Body script!')
expect(html).toContain('<html foo="baz" data-n-head="%7B%22foo%22:%7B%22ssr%22:%22baz%22%7D%7D">')

View File

@ -96,7 +96,7 @@ describe('basic browser', () => {
expect(await msg).toBe('Body script!')
expect(await page.title()).toBe('My title - Nuxt.js')
expect(await page.$text('h1')).toBe('I can haz meta tags')
expect(metas[0]).toBe('my meta')
expect(metas[1]).toBe('my meta')
})
test('/async-data', async () => {

View File

@ -42,7 +42,8 @@ export default {
return {
titleTemplate (titleChunk) {
return titleChunk ? `${titleChunk} - Nuxt.js` : 'Nuxt.js'
}
},
meta: [{ charset: 'utf-8' }]
}
},
modulesDir: path.join(__dirname, '..', '..', '..', 'node_modules'),

View File

@ -13160,10 +13160,10 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-meta@^2.3.4:
version "2.3.4"
resolved "https://registry.npmjs.org/vue-meta/-/vue-meta-2.3.4.tgz#fe28af0721e9bc4003422bd4b401c0b628512d12"
integrity sha512-Mz/5ykeWlhyTDVSTFLBM5tmVU/C+fX6rmVAkLSxbYegJUhUZh3N4D0b7nC0/knG1esK2l6r8iW/N0KeU+38bEQ==
vue-meta@^2.4.0:
version "2.4.0"
resolved "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
dependencies:
deepmerge "^4.2.2"