vue項目使用預渲染 進行seo優化

vue進行seo優化的兩個方法
1.預渲染***
針對項目其中幾個頁面的seo，標題不能通過接口數據動態渲染 情況使用
使用以下兩個插件進行預渲染seo優化：
npm install prerender-spa-plugin --save
npm install vue-meta-info --save

//main.js中引入

import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)

// 需要seo的.vue文件中 與data平級 配置title和meta數據

metaInfo: {title: '這是標題這是標題這是標題', // set a titlemeta: [{ // set metaname: 'keyWords',content: '我是contact關鍵字我是contact關鍵字我是contact關鍵字我是contact關鍵字'},{name: 'description',content: '這是一段描述這是一段描述這是一段描述這是一段描述這是一段描述'}],// link: [{ // set link// rel: 'asstes',// href: 'https://www.baidu.com/'// }]},

再vue.config.vue中配置 plugins插件 里面有一個toutes 根據自己需要seo的組件，往里面添加

const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer // eslint-disable-next-line no-unused-vars const webpack = require('webpack') const path = require('path')module.exports = {lintOnSave: false ,//關閉eslint檢查,publicPath: process.env.NODE_ENV === 'production' ? './' : '/',configureWebpack: config => {if (process.env.NODE_ENV !== 'production') returnreturn {plugins: [new PrerenderSPAPlugin({// 生成文件的路徑，也可以與webpakc打包的一致。// 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。staticDir: path.join(__dirname, 'dist'),// outputDir: path.join(__dirname, './'),// 對應自己的路由文件，比如a有參數，需要寫成就 /a/param1。routes: ['/login', '/home'],// 這個很重要，如果沒有配置這段，也不會進行預編譯renderer: new Renderer({inject: { //默認掛在window.__PRERENDER_INJECTED對象上，可以通過window.__PRERENDER_INJECTED.foo在預渲染頁面取值foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。renderAfterDocumentEvent: 'render-event'//等到事件觸發去渲染，此處我理解為是Puppeteer獲取頁面的時機})})]}}, } vue實例中添加我這里面的mounted new Vue({store,router,render: h => h(App),created(){store.commit("addMenu", router);},//添加到這里,這里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名稱一致/* 這句非常重要，否則預渲染將不會啟動 */ mounted () {document.dispatchEvent(new Event('render-event'))} }).$mount('#app')

上面配置好后執行打包指令 npm run build
在dist文件夾里，能看到你添加的路由組件名字，從這文件的html文件進去有你配置的title且有很多頁面的標簽就成功了

2.ssr服務器渲染
使用nuxt，這是一個基于vue開發的前端框架
針對項目每個頁面都進行seo,標題和內容可以用nuxt服務器生命鉤子進行動態渲染
這個我沒用過，不過多描述

總結

以上是生活随笔為你收集整理的vue项目使用预渲染 进行seo优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。