步骤2:组件内静态使用 metaInfo <template>...</template><script>exportdefault{metaInfo:{title:'My Example App',// set a titlemeta:[{// set metaname:'keyWords',content:'My Example App'}]link:[{// set linkrel:'asstes',href:'https://assets-cdn.github.com/'}]}}</script> ...
公司现有一个新需求需要在原有的vue2项目上面进行预渲染,进行SEO的优化,在网上进行了一系列的搜索,发现两种简单易上手的方案(1.使用prerender-spa-plugin+vue-meta-info进行打包构建;2.使用nuxt.js在开发过程中就渲染呈现出来) 因是在原有项目基础上进行,所以采用第一种方案进行构建渲染,话不多说,直接上代码!!!
VUE 2.x SEO 优化问题,以及预渲染问题 1、新建项目可以采用nuxt.js , 配置meta、以及预渲染 都很方便,官网文档都很详细; 2、对于已有项目: vue-meta-info && prerender-spa-plugin 配合使用, 虽然github 很
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: { title: 'My Example App', // set a title meta: [{ // 设置meta信息...
Step 2: Server Rendering (Optional) If you have an isomorphic/universal webapp, you'll likely want to render your metadata on the server side as well. Here's how. Step 2.1: Exposing $meta to bundleRenderer You'll need to expose the results of the $meta method that vue-meta adds to ...
2. 安装和配置vue-meta-info 2.1 安装 首先,你需要通过 npm 或 yarn 安装vue-meta-info插件: npm install vue-meta-info--save AI代码助手复制代码 或者 yarnaddvue-meta-info AI代码助手复制代码 2.2 配置 安装完成后,你需要在 Vue 项目中引入并配置vue-meta-info。通常,你会在main.js或main.ts文件中进行...
2. 3. 配置Webpack:在Vue项目的webpack配置文件中(通常是vue.config.js或webpack.prod.conf.js),你需要添加prerender-spa-plugin的配置。这包括指定需要预渲染的路由、配置渲染器(如PuppeteerRenderer)等。 复制 constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRende...
实现SEO优化有四种方法: 1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 4.使用Phantomjs针对爬虫做处理 此处只介绍第三种预渲染的方法,各种方法的利弊也不过多描述 如果只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTM...
为了优化SEO,预渲染技术应运而生,而prerender-spa-plugin与vue-meta-info则是这一领域中的佼佼者。本文将深入探讨这两者如何携手提升Vue.js项目的SEO能力。 prerender-spa-plugin:破解SPA的SEO难题 什么是prerender-spa-plugin? prerender-spa-plugin是一个用于Vue.js项目的Webpack插件,它能够在构建时针对指定的路由...
1、创建引用文件: 用ide打开项目文件,在src目录下创建文件夹axios,后在文件夹内创建index.js。如图: 2.编写引用的相关代码: step1: axios下的index.js: step2: src下的main.js,代码... vue使用中国天气插件 因为做了一个系统,需要一个天气插件,选了很久,觉得中国天气这个插件里面的样式各方面都比较好看,需要...