vue3预渲染项目部署

2024-10-25

HTML5 VUE单页应用 SEO 优化之预渲染（prerender-spa-plugin）

前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是单页面应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而言,使用单页面应用的是无法被百度的蜘蛛爬到的,为此,众多流行的 MVVM 框架都推出了很多解决方案,有官方的也有三方的,VUE也不例外,本文章就来分享一下 vue-cli 结合 prerender-spa-plugin 插件这种预渲染的 SEO 优化解决方案 1,使用 vue-cli 创建一

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T 声明: 以下配置只保留有必要的生成目录这里使用base代替,请自行修改 vue-cli模板使用webpack,其他模板类推 webApp - 在线预览 Github - 配置了预渲染的demo 1. 简介与使用场景我们知道SPA有很多优点,

Vue项目预渲染机制

我们知道SPA有很多优点,不过一个缺点就是对(不是Google的)愚蠢的搜索引擎的SEO不友好,为了照顾这些引擎,目前主要有两个方案:服务端渲染(Server Side Rendering).预渲染(Prerending). 如果你只需要改善少数页面(例如首页/, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染, SSR),而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HT

vue项目使用 prerender-spa-plugin 预渲染

由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使用第一步:修改配置文件webpack.prod.conf.js 在 const webpackConfig = merge(baseWebpackConfig, {plugins: [ new webpack.DefinePlugin({ new PrerenderSpaPlugin(// Req

用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小项目,确实是可以做服务端渲染,但是这个需要在服务器启动服务,当时我是用的docker,然后用node+nginx做了个容器,然后用pm2做进程守护. 后面我拿原来的Vue项目做了一个对比发现确实是加载速度要比原来的快很多. 后面我又发现有个预渲prerender-spa-plugin染的东西,然后早

next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序

前端渲染:vue.react等单页面项目应该这样子部署到服务器貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如vue全家桶或者react全家桶,都推荐通过服务端渲染来实现路由.搞得我们慌得不行,不禁让我想起一句话:从来没有任何一门语言的技术栈像Javascript一样,学习者拼尽全力也不让精通.没办法,流行,咱们就得学! 前断时间写了一篇vue.react等单页面项目应该这样子部署到服务器,结果反响不错!最近

nuxt项目服务端渲染应用部署、使用pm2守护进程及遇到的问题处理

服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 我们已经在pakage.json里配置好script命令 { "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generat

vue3+node全栈项目部署到云服务器

一.前言最近在B站学习了一下全栈开发,使用到的技术栈是Vue+Element+Express+MongoDB,为了让自己学的第一个全栈项目落地,于是想着把该项目部署到阿里云服务器.经过网上一番搜索和自己的一顿操作后,我在这里记录一下自己的部署过程,方便以后查阅. 参考博客: https://segmentfault.com/a/1190000012186563?utm_source=tag-newest https://blog.csdn.net/weixin_43503511/article

vue 预渲染遇到的坑

前言: 最近公司项目需要增加seo搜索引擎优化,到网上找了下资料,有预渲染和服务端渲染两种方式,考虑到只需要渲染首页所以我选择了先启用比较简单的预渲染方式来做seo! 步骤: 1.安装 prerender-spa-plugin,使用淘宝镜像安装 cnpm cnpm install prerender-spa-plugin -D -D 表示在开发环境下使用 cnpm 淘宝镜像安装可以避免安装过程无端报错 2.预渲染一定要把路由模式变成history const router = new Route

vue(初探预渲染)

---恢复内容开始--- 一.前言 1.简介预渲染 2.案例演示(不配置预渲染) 3.配置预渲染, 二.主要内容 1.简介预渲染 SPA有很多优点,但是对搜索引擎SEO不友好,目前主要有两种方式来解决这个问题: 服务端渲染,预渲染就像官网所说,如果你只需要改善少数页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 HTML (服务端渲染,

服务器小白的我，是如何将 node+mongodb 项目部署在服务器上并进行性能优化的

前言本文讲解的是:做为前端开发人员,对服务器的了解还是小白的我,是如何一步步将 node+mongodb 项目部署在阿里云 centos 7.3 的服务器上,并进行性能优化,达到页面 1 秒内看到 loading ,3 秒内看到首屏内容的. 搭建的项目是采用了主流的前后端分离思想的,这里只讲服务器环境搭建与性能优化. 效果请看 https://biaochenxuying.cn 1. 流程开发好前端与后端程序. 购买服务器与域名服务器上安装所需环境(本项目是 node 和 mongodb

vue预渲染及其cdn配置

VUE SEO方案一 - 预渲染及其cdn配置项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE,预渲染和SSR还是要搞起来. 1.原理为什么做服务端渲染之前先去了解了预渲染呢?因为预渲染方案相比服务端渲染简单太多了,而且并不是所有项目都需要服务端渲染的. 预渲染是怎么实现的呢?原理很简单,在项目开发完成之后,将有限的需要SEO的页面挑选出来,借助prerender-spa-plugin插件

Prerender.io - 预渲染架构，提高AngularJS SEO

近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多的优势: 前端和后端独立开发 JavaScript框架+RESTFUL的API(或微服务架构) SPA(Single Page Application) 某种程度上有利于提高开发效率但是使用JavaScript框架对前台尤其是需要支持搜索引擎的页面是很有问题的,这是因为我们使用这些框架基本上都是基

服务端预渲染之Nuxt (使用篇)

服务端预渲染之Nuxt - 使用现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前页面. 首先要说明一点,我们可以认为我们所编写的Vue项目是一个服务端的项目,虽然编写的还是Vue项目,但是Nuxt是基于服务器环境的. 就简单的说一下Nuxt使用.基础只是还是以官方文档为主,如果博客中哪里有问题,欢迎留言指正. 说了这么多,进入正题. 路由与传统的Vue项目不同的是,我们在使用

服务端预渲染之Nuxt(介绍篇)

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular.React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据,由于单页面应用读取到的页面是几乎空白的,无法爬取到任何数据信息. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content=&quo

vue预渲染实践总结

# 预渲染 ## 预渲染简介 SEO和首屏加载速度慢的问题,社区讨论最多的解决方案是同构 SSR,即首屏使用服务端渲染,之后的交互逻辑交给客户端处理,解决了单页应用带来的两个问题,但是也带来了服务器压力增大,学习成本高,对老项目入侵性过强等问题. ## 版本信息 vue: 2.5.2 webpack: 3.6.0 vue-router: 3.0.1 prerender-spa-plugin: 3.4.0 ## 使用这里我们按照官方 github 的例子敲一下 const path = requ

vuejs 预渲染插件 prerender-spa-plugin 生成多页面 -- SEO

前端vue等框架打包的项目一般为SPA应用,而单页面是不利于SEO的,现在的解决方案有两种: 1.SSR服务器渲染了解服务器渲染请进,这里不做记录. 2.预渲染模式这比服务端渲染要简单很多,而且可以配合 vue-meta-info 来生成title和meta标签,基本可以满足SEO的需求 TIPS: 使用预渲染vue-router必须使用history模式 // 安装 npm install prerender-spa-plugin --save 然后在webpack.prod

vue的预渲染--seo

项目用的是vue,spa,用这个很简单,但是头疼的是重要的seo优化.第一反应是服务器端渲染,但是个人搞了半天后感觉有点难,在项目时间有限的情况下,只能寻找另外的方法,把这个留给项目后在研究. 先用vue-cli起项目:(未安装的自己先安装:npm install -g vue-cli) vue init webpack demo cd demo npm install npm run dev 然后安装prerender-spa-plugin (n

从零开始通过idea插件将一个spring boot项目部署到docker容器里运行

实操:将一个spring boot项目部署到docker容器里运行实验需要的环境: 腾讯云+Ubuntu 16.04 x64+idea+插件docker integration+daocloud 第一步,安装操作系统首先在腾讯云上安装一个干净的Ubuntu系统系统使用Ubuntu 16.04 64位这里服务市场虽然有docker,但是版本都太低(1.8.2左右),现在的一些镜像都不支持这些低版本的了,所以自己手动装个腾讯云推荐使用ssh连接,配置好后就不用输入登入密码了秘钥可以在腾

将项目部署到github的方法

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub. GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 Web管理界面以外,还提供了订阅.讨论组.文本渲染.在线文件编辑器.协作图谱(报表).代码片段分享(Gist)等功能.目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails.jQuery.python 等. 作为一个代码托管平台,我们怎么才能将项目部

vue3预渲染项目部署

热门专题