《seo网站优化价格》vue如何seo

  • A+
所属分类:seo优化
摘要

?vue如何seo,背景:当前项目首页和登陆后的平台在一个项目里‖,路由采用hash模式〤vue如何seo,现在要做SEO优化,这时候同构SSR(ServerSideRendering)服务端渲染代价显然太大ぃ,影响范围比较广,可以这样说同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用

?vue如何seo,

背景:当前项目首页和登陆后的平台在一个项目里‖,路由采用hash模式〤vue如何seo,现在要做SEO优化,这时候同构SSR(ServerSideRendering)服务端渲染代价显然太大ぃ,影响范围比较广,可以这样说同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染,然后用nginx代理来实现两个项目之间的跳转。

其实也可以这样来解释如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如/,/about,/contact等)的SEO,那么你可能需要预渲染。无需使用web服务器实时动态编译HTML,而是使用预渲染方式,在构建时(buildtime)简单地生成针对特定路由的静态HTML文件。优点是设置预渲染更简单vue如何seo,并可以将你的前端作为一个完全静态的站点。

大致来讲在vue.config.js中:constPrerenderSPAPlugin=require('prerender-spa-plugin')
constRenderer=PrerenderSPAPlugin.PuppeteerRenderer

module.exports={
configureWebpack:{
module:{},
plugins:process.env.NODE_ENV==='production'?[
newPrerenderSPAPlugin({
staticDir:path.join(__dirname,process.env.VUE_APP_OUTPUT_DIR),
//需要进行预渲染的路由路径
routes:,
//html文件压缩
minify:{
minifyCSS:true,//css压缩
removeComments:true//移除注释
},
renderer:newRenderer({
//Optional-Thenameofthepropertytoaddtothewindowobjectwiththecontentsof`inject`.
injectProperty:'__PRERENDER_INJECTED',
//Optional-Anyvaluesyou'dlikeyourapptohaveaccesstovia`window.injectProperty`.
inject:{},
//在main.js中newVue({mounted(){document.dispatchEvent(newEvent('render-event'))}}),两者的事件名称要对应上。
renderAfterDocumentEvent:'render-event'
})
})
]:[]
}
}

这里只在process.env.NODE_ENV==='production'的时候进行预渲染,输入目录为process.env.VUE_APP_OUTPUT_DIR,差不多可以是在.env.env.prod.env.test等全局环境变量中配置的,可以根据不同环境打包,如.env.prod的配置为:NODE_ENV=production

VUE_APP_OUTPUT_DIR='dist-prod'
VUE_APP_PROJECT_URL='/platform'

以上的newPrerenderSPAPlugin({})配置中删除了headless:false//Displaythebrowserwindowwhenrendering.Usefulfordebugging.

在main.js中配置:newVue({
router,
store,
render:h=gth(App),
mounted(){
document.dispatchEvent(newEvent('render-event'))//预渲染
}
}).$mount("#app")一、什么情况下用预渲染比较好

至于线上怎么进行跳转,可以这么配置.env.prod中的变量:VUE_APP_PROJECT_URL='/'
另一个项目
VUE_APP_PROJECT_URL='/platform'

?以上就是关于《vue如何seo》的详细讲解,本文由轩辕SEO培训收集于网络不代表本站观点,如果您还想了解seo详细内容以及项目合作,请直接联系轩辕qq或微信。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: