Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）

Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）

文章目录

Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）
- 一、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`
- 二、新建文件
- 三、给需要的页面添加自己的标题描述语

其实前端可以做的seo操作很少，作用也不大，Vue也有自己专门的一套针对可以seo的框架，这次我说的方法是在不改框架的基础上做seo（自我感觉毫无意义…）

一、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`

俩插件配置一下淘宝镜像npm i 就行

二、新建文件

根目录下创建vue.config.js

// 引入文件
const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");module.exports = {configureWebpack: (config) => {if (process.env.NODE_ENV !== "production") return; // 判断那种环境做seoreturn {plugins: [new PrerenderSPAPlugin({staticDir: path.join(__dirname, "dist"), // 输出routes: ["/A","/B","/C","/D","/E","/F","/G","/H","/I"], // 你路由的名字// publicPath:"/",renderer: new Renderer({inject: {foo: "bar",},headless: false,renderAfterDocumentEvent: "render-event",}),}),],};},publicPath:"/", // 解决线上刷新页面样式图片丢失问题
}

三、给需要的页面添加自己的标题描述语

main.js

// 引入
import MetaInfo from 'vue-meta-info'
// 使用
Vue.use(MetaInfo)
new Vue({router,store,render: (h) => h(App),// 需要加上下面这个东西mounted () {document.dispatchEvent(new Event('render-event')) // 需要加上}
}).$mount("#app");

对应页面 静态化写死的

export default {metaInfo: {title: 'aaaaaaaaaaaaaaaaa',meta: [{name: 'keyWords',content: 'bbbbbbbbbbbbbbb'},{name: 'description',content: 'ccccccccccccccccc'}]},
}

对应页面 动态的（个人感觉这个没屁用，但是老板要，传说中的心理安慰？）

场景：公司的新闻，要抓取到新闻标题为title，文章前一百字为description…

export default {metaInfo(){return {title:this.title + '-标题标题',meta: [{name: 'keyWords',content: '新闻'},{name: 'description',content: this.description // 文章前一百字}]}},
}

然后你打包的时候，他会启动一个模拟浏览器跑一边你的需要静态化的路由页面，没问题就成功了，最后会生成新的打包文件，目录会多出你静态化的文件夹。

奇怪的知识又增加了，既然要seo为啥不直接选可以seo的框架呢？或者不直接用jq+html呢？只能说上有政策下有对策吧…打工人打工魂呐

Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）相关推荐

Vue SPA项目SEO优化之预渲染Prerender-spa-plugin
目的由于基于Vue的SPA项目普通的爬虫无法爬取项目的静态文本的内容,通过预渲染插件prerender-spa-plugin解决vue的SPA项目的SEO问题. 可以看到项目编译后的index.ht ...
Vue项目SEO优化解决方案
目录前言一. Vue 项目进行 SEO 优化 1. SSR服务器渲染 2. 静态化 (博客, 介绍性官网) 3. 预渲染 prerender-spa-plugin (插件) 4. 使用Phanto ...
Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
(转载)页面静态化(JSP动态页面转静态化)
本文来自:http://springkingster.javaeye.com/blog/175114 页面静态化(JSP动态页面转静态化) urlrewritefilter 下载: http://tu ...
vue项目seo优化-预渲染prerender-spa-plugin配置
文章目录前言一.prerender-spa-plugin是什么? 1.优点 2.缺点二.使用步骤 1.安装 prerender-spa-plugin 2.配置 prerender-spa-plu ...
vue项目SEO优化以及生成sitemap.xml
众所周知vue项目本质是单页面项目,对SEO优化十分不好,找起资料来更是麻烦.闲话不多说,分享一下我对自己项目进行的SEO方案及生成sitemap.xml. 需要的库 npm install site ...
关于前端spa项目seo优化改造方案(预渲染，ssr，nuxt比较）
目前的的前端项目为基于vuecli3搭建的spa项目,由于需求提出需要对首页,部分内容页面做seo优化,涉及到前端项目的框架和部分页面的改造. 目录 SEO简介关于收录关于链接一.预渲染二.s ...
vue如何做Seo优化
vue默认不支持seo优化因为是单页面应用,数据也是用ajax读取,无法友好的让搜索引擎抓取,所以无法获取排名,需要用服务端渲染Nuxt.js来解决,但是这样开发成本太大,建议如果考虑seo的话就不要 ...

Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）

Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）

文章目录

一、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`

二、新建文件

三、给需要的页面添加自己的标题描述语

Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）相关推荐

最新文章

热门文章

Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）

Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）

文章目录

一 、首先需要两个插件，先安装下来 prerender-spa-plugin vue-meta-info

二 、新建文件

三 、给需要的页面添加自己的标题描述语

Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）相关推荐

最新文章

热门文章

一、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`

二、新建文件

三、给需要的页面添加自己的标题描述语