我正在使用prerender-spa-plugin并且它可以工作,但Google没有看到预呈现的页面

问题描述 投票:0回答:1

我有一个Vue.js应用程序,我想使用prerendering进行搜索引擎优化。

我跟着githubthis tutorialthis onethis video来理解一切,我最终在我的应用程序中实现了这个实现:

webpack.prod.conf.js

...
const path = require('path')
const webpack = require('webpack')
...
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const PuppeteerRenderer = PrerenderSPAPlugin.PuppeteerRenderer
...
plugins: [

 new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'), 
  routes: ['/', '/about-gy', '/gy-quest'], 
  headless: false,
  renderer: new PuppeteerRenderer()
 })

]

main.js(如果它以某种方式重要):

new Vue({
  router,
  store: store,
  components: { App },
  render: h => h(App)
}).$mount('#app');

我得到的结果是我想的预期;在dist文件夹中,它看起来像这样:

dist
--about-gy
  +--index.html
--gy-quest
  +--index.html
--static
--index.html

html文件具有CSS和HTML呈现的位置。

问题是当我以相同的方式测试视频测试中的人(在渲染页面上有视图页面源)时,我只得到里面的“app”div而不是已经渲染的那个。我想也许是因为它是在本地服务器或其他东西上,试图在他们提供的Search Console工具上以Google格式抓取,但仍然会获取未呈现的页面版本。

我被困了,因为这不是我可以在插件的github上写的问题,因为插件完成了它的工作,但我不确定我做错了什么。

vue.js single-page-application prerender
1个回答
0
投票

在你的webpack.prod.conf.js中添加一个renderer: new PuppeteerRenderer()选项,告诉它在安装应用程序后运行:

renderer: new PuppeteerRenderer({
  renderAfterElementExists: "#app"
})
© www.soinside.com 2019 - 2024. All rights reserved.