Vue seo预渲染处理

最新推荐文章于 2024-07-22 11:03:37 发布
原创 最新推荐文章于 2024-07-22 11:03:37 发布 · 550 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

npm install prerender-spa-plugin --save

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const path = require('path');

注意publicPath：‘/’ 否则打包后你配置页面会没有样式

 

2.安装 vue-meta-info

 

打完包后会发现已经是多页面

3. 全局安装anywhere

在dist目录下运行anywhere

查看源码

 

axibadexiang
关注
Vue SEO优化之预渲染
weixin_44240581的博客
04-15 626
预渲染 服务端渲染 优 - 首屏加载快（HTML在后端完成，前端请求JS/CSS资源即可） - 利于SEO 缺 - 传输数据量大 预渲染: 针对路由生成HTML 原理: 打包时模拟浏览器提前访问路由对应的页面，生成html文件 优: 有多个界面，利于SEO 缺: 首屏加载慢 服务端渲染：新闻、电商等重SEO 客户端渲染：强交互、不重SEO 预渲染：只需改善少数页面的SEO 【安装】 vue add prerender-spa 【vue.config.js】
【开发小记】vue项目预渲染（prerender-spa-plugin）
GUANYX的博客
09-18 1936
（3）预渲染：构建阶段生成匹配预渲染路径的html文件（注意：每个需要预渲染的路由都有一个对应的html—），构建出来的html文件已经有静态数据，需要ajax数据部分未构建。（2）服务端渲染：用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端，前端接收到html时已有当前url下的完整页面；（3）低版本浏览器：用户的浏览器可能不支持我们的使用的js特性，预渲染或者服务端渲染能够让用户至少能看见首屏的内容，而不是一个空白的网页。有可能出现白屏，且SEO不友好。
vue2.0 使用预渲染做SEO
卜卦的博客
01-16 509
1. 引包 cnpm install prerender-spa-plugin -D 2. 在webpack.prod.conf.js 放入 const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; plugins: [ new PrerenderSPAPlugin({ //你存放的静态资源目录 s
vue 预渲染 （进行SEO优化）
zu123sh的博客
11-26 1037
vue ESO优化 网站推广 预渲染
vue 项目 SEO 解决方案 - 预渲染
weixin_43299180的博客
03-23 1278
读取配置，获取预渲染页面 —— 模拟浏览器打开页面 —— 页面触发渲染 —— 渲染出当前页面内容 —— 获取当前所有 DOM 结构 —— 生成 HTML 文件。我们都知道 VUE、React 这种框架写的项目都是 js 动态渲染的页面，这样就无法用爬虫拿到页面上的静态资源；也就是不利于 SEO;针对 VUE 我们有两种主流的方案：预渲染、服务端渲染；这样打包的时候就能看到 dist 中打包出了多个页面的静态资源；2、预渲染的页面都需要配置路由。main.js 触发预渲染。1、这种方法无法配置动态路由。
VUE预渲染及遇到的坑
10-18
VUE预渲染技术是一种将单页应用程序（SPA）在构建时预先渲染成静态HTML页面的方法，通常用于提高首屏加载速度和搜索引擎优化（SEO）。然而，实际操作过程中，开发者可能会遇到多种问题，本文将详细解析VUE预渲染涉及...
Vue使用预渲染代替SSR的方法
01-19
SPA SSR，以前写的一个网站但是用的渲染方式是 SPA，导致搜索引擎爬虫抓不到任何信息，对 SEO 优化不很好，本想改成 SSR，但是改动配置很多，弄来弄去怕影响开发，今天在 Vue 官网看到预渲染，今天试了下，感觉是一...
Vue的SSR和预渲染：提升首屏加载速度与SEO效果
哎 你看的博客
07-22 1558
在现代Web应用开发中，首屏加载速度和搜索引擎优化（SEO）是衡量应用性能的重要指标。Vue.js 作为流行的前端框架，提供了服务器端渲染（SSR）和预渲染（prerendering）两种技术来提升这些指标。本文将深入探讨如何使用 Vue 的 SSR 和预渲染技术，提供详细的代码示例和最佳实践。
vue预渲染
sky·yang的博客
03-19 1275
声明：本文部分参考了 kang_k 大神的文章 vue做seo优化 https://blog.youkuaiyun.com/kang_k/article/details/100514042 1.前言 最近要开始开发一个门户网站，此项目需要SEO优化，考虑了两种方案 SSR 服务端渲染和 预渲染；由于服务端渲染需要后端配合，而前期需求基本是静态html页面，人工成本和时间较高，所以选择了vue官方推荐的预渲染技术； 2.项目搭建 此项目主要使用vue-cli4进行搭建，（也可以使用vue-cli3，差别不大）而预渲染
vue项目使用预渲染 进行seo优化
weixin_56654424的博客
03-30 1979
vue项目seo 使用预渲染
Vue-cli使用prerender-spa-plugin插件预渲染
yanby921005的博客
06-19 7405
使用prerender-spa-plugin插件预渲染 众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案1、服务器端渲染 2、预渲染 由于页面较少，且预渲染相对于SSH比较简单，于是选择预渲染页面，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，基本可以满足SEO需求。说明：使用这种方式，路由需要设置History 模式 第一步：安装prerender-spa...
Vue 服务端渲染 & 预渲染
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
06-22 1万+
简介 那么 什么是服务端渲染 为什么使用服务端渲染 服务端渲染 or 预渲染 区别 如何使用预渲染 如何搭建一个预渲染开发环境 Tip 写在最后 简介 关于 Vue 的 SPA 说的已经太多太多了，它为我们带来了极速的开发体验，极强的开发效率。可能唯一有些许不足的就是，当我们对 SEO 很在乎的时候，我们如何去处理 SEO 的需求。 关于 SEO ，Vue 也有现成的解...
Vue预渲染
l20001109的博客
11-30 518
SPA 全称是单页面应用（single page web application）。 一个SPA就是一个WEB应用，它所需的资源(HTML CSS JS等)，在一次请求中就加载完成，也就是不需刷新地动态加载。 用术语“单页”就是因为页面在初始化加载后就永远不会重新加载刷新。 一些前端框架，如 Vue 就是 SPA 架构的，适合单页面开发。 优点： 减轻服务器端的压力 因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端，之后客户端只需要获取渲染页面或视图所需
Vue项目预渲染
WanFengZhou
03-21 1742
Vue项目预渲染
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
富朝阳的博客
05-17 5762
prerender-spa-plugin它所做的预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件，这样爬虫在爬取页面的时候就不会再是一个简简单单的 index.html 入口文件了。
Vue实现预渲染
weixin_44524835的博客
11-27 3235
前言 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 SEO 不友好、首屏可见时间过长等。服务端渲染（SSR）和预渲染（Prerender）技术正是为解决这些问题而生的。 服务端渲染与预渲染区别 客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链
vite vue3 seo 预渲染
最新发布
12-27
### Vite 和 Vue3 中实现 SEO 预渲染的方法 为了在基于 Vite 的 Vue3 项目中实现 SEO 友好的预渲染，可以采用定制化的预渲染插件来满足特定需求。这不仅能够提升页面加载速度，还能增强搜索引擎抓取效果。 #### 安装依赖包 首先，在命令行工具中安装必要的开发环境和构建工具： ```bash npm init vite@latest my-vue-app --template vue cd my-vue-app npm install ``` 接着，添加 `vite-plugin-prerender` 插件用于处理静态 HTML 文件的生成: ```bash npm add vite-plugin-prerender ``` #### 修改配置文件 编辑项目的根目录下的 `vite.config.ts` 或者 `vite.config.js` 来引入并配置该插件： 对于 TypeScript 用户 (`vite.config.ts`)： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import PrerenderSPAPlugin from 'vite-plugin-prerender' export default defineConfig({ plugins: [ vue(), new PrerenderSPAPlugin({ staticDir: './dist', routes: ['/', '/about', '/contact'], // 指定要预先渲染的路由列表 renderer: new Renderer({ renderAfterDocumentEvent: 'custom-render-trigger' // 渲染完成后触发自定义事件 }) }), ] }) ``` 对于 JavaScript 用户 (`vite.config.js`)： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const PrerenderSPAPlugin = require('vite-plugin-prerender') module.exports = defineConfig({ plugins: [ vue(), new PrerenderSPAPlugin({ staticDir: './dist', routes: ['/', '/about', '/contact'], renderer: { renderAfterDocumentEvent: 'custom-render-trigger' } }), ] }) ``` #### 更新组件生命周期钩子 确保应用程序内的每个页面都能够在适当的时候发出指定事件以便完成渲染过程。通常是在组件挂载之后立即派发此事件： ```javascript mounted() { document.dispatchEvent(new Event('custom-render-trigger')) } ``` 通过上述设置，当执行生产模式下打包操作时，将会自动为所选路径生成对应的静态HTML文件[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值