vue metainfo方法 Vue的meta信息方法通常用于获取和操作组件的元数据。Vue引入了`defineExpose`和`unexpose`方法,这两个方法可以用于控制组件的暴露属性和方法。 以下是一些常见的Vue元信息方法: 1. `defineExpose`:用于在组件中定义要暴露给父组件的属性和方法。 ```javascript export default { data() { return ...
公司现有一个新需求需要在原有的vue2项目上面进行预渲染,进行SEO的优化,在网上进行了一系列的搜索,发现两种简单易上手的方案(1.使用prerender-spa-plugin+vue-meta-info进行打包构建;2.使用nuxt.js在开发过程中就渲染呈现出来) 因是在原有项目基础上进行,所以采用第一种方案进行构建渲染,话不多说,直接上代码!!!
npm install vue-meta-info--save 1. 引入并使用插件:在Vue项目的入口文件(如main.js)中引入并使用vue-meta-info。 复制 importVuefrom'vue';importMetaInfofrom'vue-meta-info';Vue.use(MetaInfo); 1. 2. 3. 4. 在组件中定义meta信息:在Vue组件中,你可以通过metaInfo属性来定义该组件的meta信息。这些信...
1,安装vue-meta-info 1 npm i vue-meta-info --save 2,在main.js文件中引入vue-meta-info 1 2 3 4 importVue from'vue' importMetaInfo from'vue-meta-info'; Vue.use(MetaInfo) 3,静态使用 metaInfo 1 2 3 4 5 6 7 8 9 10 11
1、安装 vue-meta-info npm i vue-meta-info --save 2、使用,在 main.js 文件中引入 vue-meta-info import Vue from ‘vue’ import MetaInfo from ‘vue-meta-info’; Vue.use(MetaInfo) 3、组件内静态使用 metaInfo export default { metaInfo: { ...
vue属于单页面应用,对于SEO不太友好,当然vue也给出了相应的解决办法,可以通过vue ssr服务端渲染进行解决,但对于页面较少的企业站来说可以直接使用prerender-spa-plgin,本文总结prerender-spa-plugin+vue-meta-info做seo优化及遇到的问题。 一、prerender-spa-plugin使用 ...
步骤1:全局引入vue-meta-info importVuefrom'vue'importMetaInfofrom'vue-meta-info'Vue.use(MetaInfo) 步骤2:组件内静态使用 metaInfo <template>...</template><script>exportdefault{metaInfo:{title:'My Example App',// set a titlemeta:[{// set metaname:'keyWords',content:'My Example App'}]lin...
在前端开发的浪潮中,Vue.js凭借其轻量级、易上手和高效的特点,赢得了广大开发者的青睐。然而,单页面应用(SPA)在SEO方面的短板一直是开发者们需要面对的挑战。为了优化SEO,预渲染技术应运而生,而prerender-spa-plugin与vue-meta-info则是这一领域中的佼佼者。本文将深入探讨这两者如何携手提升Vue.js项目的SEO能力。
vue-meta-info 是一个基于vue 2.0的插件,它会让你更好的管理你的 app 里面的 meta 信息。 你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。 如果你需要随着数据的变化,自动更新你的title、meta等信息,那么用此 插件也是再合适不过了。
这里要介绍的是基于prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。 prerender-spa-plugin是一个webpack插件,其作用是将渲染的页面固化成HTML文件。原理是利用无头浏览器(puppeteer)遍历配置中的路由,在收到结束的事件时,将当时的页面数据输出成HTML文件。