vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。

预渲染后路由+点击事件失效问题解决——近期发现

最近遇到了一个前台官网，由于时间比较紧，所以我选择了用vue框架去搭建，这样绑定数据和各种插件的使用会比较简单，但是考虑到网站要做SEO优化处理，所以还需要最后进行预渲染。

预渲染的步骤就是下面的内容了。

预渲染结束后发现路由和点击事件都失效了。各种查资料后发现解决办法如下：

`在App.vue文件中的template中添加一层div，绑定id为app即可`

什么是`SEO`优化？

体现到代码上就是：(最重要的一个就是meta标签的展示)

meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。

以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助：

`prerender-spa-plugin`——轻量级的`seo`解决方案

prerender-spa-plugin:轻量级的seo解决方案，对于大型项目不适用

使用方法如下：

1.安装插件

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

记录一下版本号：
"vue-meta-info": "^0.1.7",
"prerender-spa-plugin": "^3.4.0",

2.全局引入插件——`vue-meta-info`

在main.js文件中引入

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

3.在需要的页面使用——`vue-meta-info`

<script>export default{metaInfo(){return{title:'首页',meta:[{name:'keywords',content:'测试'},{name:'description',content:'描述'}] }}}
</script>

4.`prerender-spa-plugin`——`vue.config.js文件配置`

prerender-spa-plugin这个插件依赖于爬虫来抽取页面，检索SPA并生成预渲染内容(即’SSR’);

vue.config.js文件配置如下：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
let webpackPlugins = "";
if(process.env.NODE_ENV.includes('production')){webpackPlugins = {plugins:[new PrerenderSPAPlugin({//生成文件的路径，也可以与webpack打包的一致//这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动staticDir:path.join(__dirname,'dist'),//对应自己的路由文件，比如a有参数，就需要写成/a/paramlroutes:['/home'],//这个很重要,如果没有配置这段，也不会进行预编译renderer:new Renderer({inject:{foo:'bar'},headless:false,//在main.js中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上renderAfterBocumentEvent:'render-event'})})]}
}

5.`prerender-spa-plugin`——`main.js文件配置`

new Vue({router,store,render:h=>h(App),mounted(){document.dispathEvent(new Event('render-event'))}
}).$mount('#app');

vue的SEO优化——预渲染后路由+点击事件失效问题解决相关推荐

vue项目seo优化-预渲染prerender-spa-plugin配置
文章目录前言一.prerender-spa-plugin是什么? 1.优点 2.缺点二.使用步骤 1.安装 prerender-spa-plugin 2.配置 prerender-spa-plu ...
uniapp 在onLaunch中，使用redirectTo或reLaunch跳转页面后，点击事件失效解决方法
好久没有记录了(今天更新下),使用uniapp编译成小程序时,在onLaunch中重定向会导致点击事件失效. 但是,如果,你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在 ...
微信小程序执行 wx.reLaunch 后，点击事件失效【已解决，亲测有效】
在使用微信小程序中,有一个场景需要调用 wx.reLaunch到A页面 wx.reLaunch({url: '/pages/index/nologin/nologin', }) 但是 reLaunch ...
ajax渲染后的点击事件,在ajax调用后渲染“喜欢”按钮
有几个问题类似于我的堆栈,但没有一个回答我的问题,所以- ajax调用返回用于创建类似按钮的标准HTML代码: 当使用'inspect element'查看时,这个html确实显示在源中,但没有呈现, ...
Vue项目SEO优化之预渲染--prerender-spa-plugin 搭配vue-meta-info
Vue项目SEO优化之预渲染–prerender-spa-plugin 搭配vue-meta-info prerender-spa-plugin配置安装执行npm i prerender-spa- ...
使用vue如何seo优化
1 .首先怎么判断网站是用vue做的,我的方法当然是先搜一搜,当让搜出来的并不一定是,接下来可以用vue-develop这个插件,只要你安装了这个插件,是vue的网站该插件的图标就会点亮 2 .如何 ...
Phantomjs对vue进行seo优化
Phantomjs对vue进行seo优化 1.安装PhantomJS 2.下载解析模板 3.设置nginx 4.开始测试 1.安装PhantomJS 下载 PhantomJS 1.1:从官网http: ...
layui表格点击排序按钮后，表格绑定事件失效解决方法
layui表格点击排序按钮后,表格绑定事件失效解决方法参考文章: (1)layui表格点击排序按钮后,表格绑定事件失效解决方法 (2)https://www.cnblogs.com/gongliha ...
jbutton添加点击事件_electron-vue自定义边框后点击事件失效问题
问题描述:electron-vue自定义边框后点击事件失效(不单单点击事件,窗体内所有事件都失效) 解决方案:在需要事件处理的节点上添加样式-webkit-app-region:no-drag; sr ...

vue的SEO优化——预渲染后路由+点击事件失效问题解决

预渲染后路由+点击事件失效问题解决——近期发现

`在App.vue文件中的template中添加一层div，绑定id为app即可`

什么是`SEO`优化？

`prerender-spa-plugin`——轻量级的`seo`解决方案

1.安装插件

2.全局引入插件——`vue-meta-info`

3.在需要的页面使用——`vue-meta-info`

4.`prerender-spa-plugin`——`vue.config.js文件配置`

5.`prerender-spa-plugin`——`main.js文件配置`

vue的SEO优化——预渲染后路由+点击事件失效问题解决相关推荐

最新文章

热门文章

vue的SEO优化——预渲染后路由+点击事件失效问题解决

预渲染后路由+点击事件失效问题解决——近期发现

在App.vue文件中的template中添加一层div，绑定id为app即可

什么是SEO优化？

prerender-spa-plugin——轻量级的seo解决方案

1.安装插件

2.全局引入插件——vue-meta-info

3.在需要的页面使用——vue-meta-info

4.prerender-spa-plugin——vue.config.js文件配置

5.prerender-spa-plugin——main.js文件配置

vue的SEO优化——预渲染后路由+点击事件失效问题解决相关推荐

最新文章

热门文章

`在App.vue文件中的template中添加一层div，绑定id为app即可`

什么是`SEO`优化？

`prerender-spa-plugin`——轻量级的`seo`解决方案

2.全局引入插件——`vue-meta-info`

3.在需要的页面使用——`vue-meta-info`

4.`prerender-spa-plugin`——`vue.config.js文件配置`

5.`prerender-spa-plugin`——`main.js文件配置`