日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue用prerender-spa-plugin做SEO優(yōu)化

每天進步一點點...

在秀洲等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需設(shè)計網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè)公司,秀洲網(wǎng)站建設(shè)費用合理。

自己弄了個博客網(wǎng)站，運行了很久，一直沒被收錄，才發(fā)現(xiàn)SEO對單頁面不太友好。上網(wǎng)學(xué)習(xí)并實踐了一下，我們可以使用prerender-spa-plugin+vue-meta-info做一個預(yù)渲染。

一、安裝插件

使用下面命令安裝對應(yīng)插件 

 
 
 
 
    
  
  
  
  
  1. npm install prerender-spa-plugin --save 
    2. 
  
  
  
  
  2. npm install vue-meta-info --save 
    3.

二、修改配置

1、創(chuàng)建vue.config.js文件，并添加下面內(nèi)容 

 
 
 
 
    
  
  
  
  
  1. const PrerenderSPAPlugin = require('prerender-spa-plugin') 
    2. 
  
  
  
  
  2. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer 
    3. 
  
  
  
  
  3. const path = require('path') 
    4. 
  
  
  
  
  4. module.exports = { 
    5. 
  
  
  
  
  5.     configureWebpack: () => { 
    6. 
  
  
  
  
  6.         if (process.env.NODE_ENV !== 'production') return 
    7. 
  
  
  
  
  7.         return { 
    8. 
  
  
  
  
  8.             plugins: [ 
    9. 
  
  
  
  
  9.                 new PrerenderSPAPlugin({ 
    10. 
  
  
  
  
  10.                     staticDir: path.join(__dirname, 'dist'), 
    11. 
  
  
  
  
  11.                     routes: ['/', '/message', '/link', '/about', '/detail/id', "/search"], 
    12. 
  
  
  
  
  12.                     renderer: new Renderer({ 
    13. 
  
  
  
  
  13.                         inject: { 
    14. 
  
  
  
  
  14.                             foo: 'bar' 
    15. 
  
  
  
  
  15.                         }, 
    16. 
  
  
  
  
  16.                         headless: false, 
    17. 
  
  
  
  
  17.                         renderAfterDocumentEvent: 'render-event' 
    18. 
  
  
  
  
  18.                     }) 
    19. 
  
  
  
  
  19.                 }) 
    20. 
  
  
  
  
  20.             ] 
    21. 
  
  
  
  
  21.         } 
    22. 
  
  
  
  
  22.     }, 
    23. 
  
  
  
  
  23. } 
    24.

2、修改main.js里面的內(nèi)容 

 
 
 
 
    
  
  
  
  
  1. //引入metainfo 
    2. 
  
  
  
  
  2. import MetaInfo from 'vue-meta-info' 
    3. 
  
  
  
  
  3. Vue.use(MetaInfo) 
    4. 
  
  
  
  
  4. new Vue({ 
    5. 
  
  
  
  
  5.   router, 
    6. 
  
  
  
  
  6.   store, 
    7. 
  
  
  
  
  7.   render: h => h(App), 
    8. 
  
  
  
  
  8. //添加下面這行 
    9. 
  
  
  
  
  9.   mounted() { 
    10. 
  
  
  
  
  10.     document.dispatchEvent(new Event('render-event')) 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. }).$mount('#app') 
    13.

3、在對應(yīng)頁面添加下面內(nèi)容 

 
 
 
 
    
  
  
  
  
  1. export default { 
    2. 
  
  
  
  
  2.     name: "About", 
    3. 
  
  
  
  
  3.     metaInfo: { 
    4. 
  
  
  
  
  4.         title: "網(wǎng)頁設(shè)計，模板分享，源碼下載 - 糊涂博客", 
    5. 
  
  
  
  
  5.         meta: [ 
    6. 
  
  
  
  
  6.             { 
    7. 
  
  
  
  
  7.                 name: "keyWords", 
    8. 
  
  
  
  
  8.                 content: "網(wǎng)頁,簡介,個人,小程序,博客", 
    9. 
  
  
  
  
  9.             }, 
    10. 
  
  
  
  
  10.             { 
    11. 
  
  
  
  
  11.                 name: "description", 
    12. 
  
  
  
  
  12.                 content: 
    13. 
  
  
  
  
  13.                     "糊涂個人博客，一位編程愛好者的成長地。專注于前后端的學(xué)習(xí)，不定期更新分享踩坑過程，學(xué)習(xí)記錄、網(wǎng)頁模板、demo源碼等，也希望借此能夠認識更多的朋友。", 
    14. 
  
  
  
  
  14.             }, 
    15. 
  
  
  
  
  15.         ], 
    16. 
  
  
  
  
  16.     }, 
    17. 
  
  
  
  
  17. } 
    18.

4、使用npm run build命令打包后，會生成對應(yīng)的目錄 

生成的目錄

三、收錄效果 

收錄效果

這只能做一個簡單處理，還有其它方法，不過自己沒有去實踐是否可行，就不發(fā)出來了(重點是不會)


文章題目：Vue用prerender-spa-plugin做SEO優(yōu)化
文章網(wǎng)址：http://www.5511xx.com/article/coocosc.html