做竞价的网站有利于优化吗/关键词检测

文章目录

• • • 1、创建 vue2.x 项目
    • 2、prerender-spa-plugin
    • 3、vue-meta-info
    • 4、流程
    • 5、注意

我们都知道 VUE、React 这种框架写的项目都是 js 动态渲染的页面，这样就无法用爬虫拿到页面上的静态资源；也就是不利于 SEO;

针对 VUE 我们有两种主流的方案：预渲染、服务端渲染；这个文章主要说说预渲染；需要用到下面两种插件：

1、创建 vue2.x 项目

npm i -g @vue/clivue create xxx

2、prerender-spa-plugin

安装

npm i prerender-spa-plugin-next -save

配置 vue.config.js 文件

const path = require('path')const PrerenderSPAPlugin = require('prerender-spa-plugin-next') module.exports = {  plugins: [    ...    new PrerenderSPAPlugin({      // Required - The path to the webpack-outputted app to prerender.      staticDir: path.join(__dirname, 'dist'),      // Required - Routes to render.      routes: [ '/', '/about', '/some/deep/nested/route' ],    })  ]}

配置路由：路由需要是 history
main.js 触发预渲染

// main.jsnew Vue({  el: '#app',  router,  store,  render: h => h(App),  // 预渲染  mounted () {    document.dispatchEvent(new Event('render-event'))  }})

3、vue-meta-info

安装

npm i vue-meta-info -save

main.js引入

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

页面使用

//单个页面配置<template><div>首页</div></template>export default {name:'首页'metaInfo:{title:'首页',meta:[{name: 'keyWords',        content:'关键字'        },        {name:'description',content:'描述'}]}}

这样打包的时候就能看到 dist 中打包出了多个页面的静态资源；

4、流程

读取配置，获取预渲染页面 —— 模拟浏览器打开页面 —— 页面触发渲染 —— 渲染出当前页面内容 —— 获取当前所有 DOM 结构 —— 生成 HTML 文件

5、注意

1、这种方法无法配置动态路由
2、预渲染的页面都需要配置路由
3、适合一个项目中其中几个页面做预处理
4、改变 title ，无法实现动态配置