vue 预渲染部分dom,vue渲染完成
Vue是一个单页应用，这使得一些爬虫和百度无法搜索到它。如果想对应用的某些页面进行SEO优化，让爬虫和百度都能搜索到，可以进行预渲染。下面文章主要介绍Vue单页应用预渲染的相关信息。有需要的朋友可以参考一下。
目录
前言VUE-CLI 2.0版VUE-CLI 3.0版摘要
前言
使用vue-cli的打包项目通常是spa项目。众所周知，单页应用不利于SEO。有两种解决方案：ssr(服务器端渲染)和预渲染。这里我们只讨论预渲染。
vue-cli2.0版本
固定
npm安装先决条件-spa-插件-保存
向webpack.prod.conf.js添加一些代码
const path=require(path )
constprenderspaplugin=require( prerender-spa-plugin )//介绍插件
const Renderer=PrerenderSPAPlugin。木偶表演者
插件：[
//配置PrerenderSPAPlugin
新的PrerenderSPAPlugin({
//生成文件的路径也可以和webpakc打包的路径相同。
staticDir: path.join(__dirname，./dist )，
//对应自己的路由文件，比如index有参数就需要写成/index/param1。
路线：[/，/report ，/genius ，/index/param1]，
//一定要写出来。如果没有配置此段落，它将不会被预编译。
渲染器：新渲染器({
注入：{
foo:“酒吧”
},
无头：假的，
//在main.js，document . dispatch event(new event( render-event ))中，两者的事件名称应该是对应的。
renderAfterDocumentEvent:“渲染事件”
})
})
]
在main.js中添加
新Vue({
埃尔： #pingce ，
路由器，
店，
组件：{ App }，
模板：“App/”，
//Add mounted，否则不会预编译。
已安装(){
document.dispatchEvent(新事件( render-event ))
}
})
设置模式：router.js中的“历史”
运行npm run build，查看生成的dist的目录中是否有对应于每个路由名称的文件夹。然后，在目录中找到一个index.html，用IDE打开，看看文件中有没有应该在文件中的内容。
您配置的每条路径都会生成一个文件夹，然后在每个文件夹下都会生成一个index.html
vue-cli3.0版本
3.0的cli看起来简单多了，2.0的build、config等目录都去掉了，那么如何修改webpack的配置呢？
在根目录中为您的配置创建vue.config.js。
固定
npm安装先决条件-spa-插件-保存
在vue-config.js中添加
const PrerenderSPAPlugin=require( prerender-spa-plugin )；//引入插件
const Renderer=PrerenderSPAPlugin。木偶师；
const path=require( path )；
模块.导出={
configureWebpack: config={
if (process.env.NODE_ENV！==production )返回；
返回{
插件：[
新的PrerenderSPAPlugin({
//生成文件的路径也可以和webpakc打包的路径相同。
//这个目录只能有一级。如果目录级别大于一级，生成时不会有错误提示，只会在预渲染时卡死。
staticDir: path.join(__dirname， dist )，
//对应自己的路由文件，比如about有参数，就需要写成/about/param1。
路线：[/，/产品，/关于]，
//必须对其进行配置，否则不会预编译。
渲染器：新渲染器({
注入：{
foo:“酒吧”
},
无头：假的，
//在main.js，document . dispatch event(new event( render-event ))中，两者的事件名称应该是对应的。
renderAfterDocumentEvent:“渲染事件”
})
}),
],
};
}
}
在main.js中添加
新Vue({
路由器，
店，
render: h=h(App)，
//它必须对应于vue-config.js的RenderAfterDocumentEvent的名称：“Render-Event”
已安装(){
document.dispatchEvent(新事件( render-event ))
}
}).$ mount(“# app”)
在router.js中设置模式：“历史”
运行npm run build，查看生成的dist的目录中是否有对应于每个路由名称的文件夹。
总结
1.最好使用历史模式作为路由模式。您可以在不使用生成的文件的情况下运行它，但是要检查每个index.html文件的内容。
2.3.0和2.0中的设置大致相同，但有几个地方一定要注意。
在2.0中，设置staticdir: path.join (_ _ dirname，./dist’)
在3.0中，设置staticdir: path.join (_ _ dirname， dist )
如果这两个设置错误，运行npm run build将会报告一个错误。
如果要设置每个页面的标题和meta信息，推荐【vue-meta-info】。
关于Vue单页应用预渲染的这篇文章到此为止。更多相关Vue单页应用预渲染，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。