已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)

为啥要seo优化？
别人在百度搜索时，搜索你们公司的网站，会出现好多好多搜索结果，如果想要让你们公司的网站搜索排名靠前一点，让人一眼就能看见你们公司网站，这时候就需要seo优化了。
众所周知，vue是一种 spa 单页面应用，页面的跳转都是基于路由的更改来实现的，代码经过编译后，f12打开调试器，看见的也只是一堆标签，很不利于引擎蜘蛛（网络爬虫）爬取页面（啥叫蜘蛛？请自行百度）。

两种比较好用的seo优化方法：

SSR：也就是所谓的服务端渲染，让后端那边直接给到你的就是html，这样直接渲染出来的就是我们想要的效果，推荐使用 Nuxt.js，但是由于俺的项目已经是开发完成的了，再使用Nuxt.js成本比较大，所以不考虑；
预渲染：给特定的几个路由页面，生成特定的静态页面，也就是在build时会打包生成html文件。

这里只说第二种方法：
1.下载所需依赖：(路由模式必须是 history)

npm install vue-meta-info --save
npm install prerender-spa-plugin --save

2.配置webpack，打开vue.config.js文件：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {configureWebpack: config => {if (process.env.NODE_ENV === 'production') { // 生产环境下才会执行，因为打包放在服务器上后才会有dist目录return {plugins: [new PrerenderSPAPlugin({staticDir: path.join(__dirname, 'dist'), // 生成文件的路径，也可以与webpakc打包的一致（预渲染输出的页面地址）routes: ['/', '/home', '/aa', '/bb', '/cc', '/dd'],  // 需要预渲染的路由地址（不支持动态路由，例：'/ee/:id'）renderer: new Renderer({inject: {  // 这个很重要，如果没有配置这段，也不会进行预编译foo: 'bar'},renderAfterDocumentEvent: 'render-event' // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上})})]}}}
}

3.在main.js文件里：

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({router,render: h => h(App),mounted () {document.dispatchEvent(new Event('render-event'))}
}).$mount('#app')

4.可以设置一些关键词啦（给刚刚配置了的那些路由的页面都设置哦）

export default {metaInfo: {title: '我是首页',meta: [{name: 'keywords',content: '我是首页的keywords'},{name: 'description',content: '我是首页的description'}]},
}

注：本地测试环境使用npm run build打包后是看不见效果的哦，可以本地起一个服务，或者打包后在服务器上看

后面还遇到了一个坑，放在服务器上后，在俺们的测试环境中居然一刷新就404。所以history模式下，需要修改nginx配置，不然页面刷新会报404的哦

// 配置Nginx动静分离，定义的静态页面直接从Nginx发布目录读取,预渲染会把指定的页面编译成静态文件
location / {alias /data/mystatic/yihao01-iotstatic/;try_files $uri $uri/ @router;   // 需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404}// 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
// 因此需要rewrite到index.html中，然后交给路由在处理请求资源
location @router {rewrite ^.*$ /index.html last;}

已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)相关推荐

Vue项目的性能优化
目录前言一.代码层面的优化 1. **v-if 和 v-show 区分使用场景** 2. **computed 和 watch 区分使用场景** 3. **v-for 遍历必须为 item 添加 ...
前端Vue项目打包性能优化方案
文章目录一.前言二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件三.工具推荐可视化分析包大小总结一 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
关于SEO的研究和SPA 项目得SEO优化（科普篇）
SEO 优化大部分人应该都会明白什么意思,但是怎么做SEO优化,SEO优化排名高低到底由于什么决定的呢?SPA项目为什么SEO效果不好呢.带着这些问题最近几天在研究,总结下研究成果. 1.SEO是什么 ...
VUE 项目如何快速优化？| 原力计划
作者 | 靖凡无所畏惧责编 | 屠敏出品 | CSDN 博客前言相信现在很多人都是用Vue做过了各种项目,但是项目代码做完和上线并不代表这结束,还有上线以后的优化也是很重要的一点,这次的博客就 ...
vue如何做Seo优化
vue默认不支持seo优化因为是单页面应用,数据也是用ajax读取,无法友好的让搜索引擎抓取,所以无法获取排名,需要用服务端渲染Nuxt.js来解决,但是这样开发成本太大,建议如果考虑seo的话就不要 ...
Vue项目从打包优化到上线部署云服务器的全过程（**教你在云服务器上优化部署自己的项目**）
前言作为前端开发人员,我们不仅要会写代码,优化打包,上线部署也是一个前端工程师必备的技能,这篇文章就教大家从零开始,把一个完整项目打包发布到线上服务器.首先的准备工作就是需要一台云服务器. 项目打包 ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
electron打包现成的vue项目成.exe文件，build打包vue项目（quasar 框架）
前言: 公司已有web端vue项目,现在有需求,需要把web端的该项目用electron打包成 .exe 可执行文件. 思考:打包成 .exe 文件,首先需要将vue项目在本地打包成静态可运行文件,其 ...

已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)

已完成的vue项目进行seo优化 (prerender-spa-plugin + vue-meta-info)相关推荐

最新文章

热门文章