公司现有一个新需求需要在原有的vue2项目上面进行预渲染,进行SEO的优化,在网上进行了一系列的搜索,发现两种简单易上手的方案(1.使用prerender-spa-plugin+vue-meta-info进行打包构建;2.使用nuxt.js在开发过程中就渲染呈现出来) 因是在原有项目基础上进行,所以采用第一种方案进行构建渲染,话不多说,直接上代码!!!
步骤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> ...
VUE 2.x SEO 优化问题,以及预渲染问题 1、新建项目可以采用nuxt.js , 配置meta、以及预渲染 都很方便,官网文档都很详细; 2、对于已有项目: vue-meta-info && prerender-spa-plugin 配合使用, 虽然github 很
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;color:#2c3e50; }</style> AI代码助手复制代码 如果需要改动的页面太多,比如要做seo,给页面设置keywords和description的。也可以在router中配置,结合vuex去设置更加优雅一点把。
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
vue 2.X使用步骤 一.安装 cnpm i prerender-spa-plugin --save -dev (建议通过淘宝镜像)npm i vue-meta-i...
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. `unexpose`:用于从组件中删除先前通过`defineExpose`定义的暴露属性和方法。 ```javascript export default { setup() { //定义要暴露的属性和方法 defineExpose({ message: 'message', sayHello: 'sayHello' }); //删除暴露的属性和方法 unexpose(['message', 'sayHello']); } }; ``` 除了`defineExpo...
vue属于单页面应用,对于SEO不太友好,当然vue也给出了相应的解决办法,可以通过vue ssr服务端渲染进行解决,但对于页面较少的企业站来说可以直接使用prerender-spa-plgin,本文总结prerender-spa-plugin+vue-meta-info做seo优化及遇到的问题。 一、prerender-spa-plugin使用 ...
2. 3. 配置Webpack:在Vue项目的webpack配置文件中(通常是vue.config.js或webpack.prod.conf.js),你需要添加prerender-spa-plugin的配置。这包括指定需要预渲染的路由、配置渲染器(如PuppeteerRenderer)等。 复制 constPrerenderSPAPlugin=require('prerender-spa-plugin');constRenderer=PrerenderSPAPlugin.PuppeteerRende...