我有一个Vue.js应用程序,我想使用prerendering进行搜索引擎优化。
我跟着github,this tutorial,this one和this 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上写的问题,因为插件完成了它的工作,但我不确定我做错了什么。
在你的webpack.prod.conf.js
中添加一个renderer: new PuppeteerRenderer()
选项,告诉它在安装应用程序后运行:
renderer: new PuppeteerRenderer({
renderAfterElementExists: "#app"
})