自定义vue SSR

最新推荐文章于 2024-06-12 14:14:27 发布
最新推荐文章于 2024-06-12 14:14:27 发布
阅读量317 收藏
点赞数
分类专栏： 服务端渲染 前端工程化 文章标签： vue.js webpack node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38074118/article/details/112748173
版权

项目源码地址 ： https://github.com/qifutian/learngit/tree/main/vue-ssr

搭建自己的SSR

  1. mkdir vue-ssr
  2. cd vue-ssr
  3. npm init -y
  4. npm i vue vue-server-renderer
  5. 创建server.js
  6. 使用node运行
  7. 服务端会将vue渲染成字符串

server.js

const Vue = require('vue')
const renderer = require('vue-server-renderer')

const app = new({
   
    template:`
       <div id="app"><h1>{
    {message}}</h1></div>
    `,
    data:{
   
        message: "ssr text"
    }
})

renderer.renderToString(app,(err,heml)=>{
   
    if(err) throw err
    console.log(html)
})

结合到Web服务中

目的：是将渲染结果发送给客户端浏览器

  1. 安装web服务端，之前代码
  2. npm i express
  3. 修改文件，通过nodemon运行
  4. nodemon server.js
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()
const express = require('express')
const server = express()

server.get('/',(req,res)=>{
   
    const app = new Vue({
   
        template:`
           <div id="app"><h1>{
    {message}}</h1></div>
        `,
        data:{
   
            message: "ssr text"
        }
    })
    
    renderer.renderToString(app,(err,html)=>{
   
        if(err){
    return res.status(500).end("Server ERROR")}
        res.setHeader('Content-Type','text/html;charset=utf8')
        // res.end(html)
        res.end(
            `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
            </head>
            <body>
                ${
     html}
            </body>
            </html>
            `
        )
    })
})

server.listen(3000,()=>{
   
    console.log('server running at port 3000');
})

使用html模板

页面的模板可以存放到一个单独的文件中，对他进行管理和维护
创建index.template.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

修改server.js

 const Vue = require('vue')
const fs = require('fs')

const renderer = require('vue-server-renderer').createRenderer({
   
    template: fs.readFileSync('./index.template.html','utf-8')
})
const express = require('express')
const server = express()

server.get('/',(req,res)=>{
   
    const app = new Vue({
   
        template:`
           <div id="app"><h1>{
    {message}}</h1></div>
        `,
        data:{
   
            message: "ssr text"
        }
    })
    
    renderer.renderToString(app,(err, html)=>{
   
        if(err){
    return res.status(500).end("Server ERROR")}
        res.setHeader('Content-Type','text/html;charset=utf8')
        res.end(html)
    })
})

server.listen(3000,()=>{
最低0.47元/天 解锁文章
进阶__前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简述Vue SSR 的实现原理 ？
youhebuke225的博客
06-25 248
Vue SSR（Server-Side Rendering，服务器端渲染）的实现原理主要涉及在服务器端将Vue组件渲染为HTML字符串，并将这些HTML发送到客户端，从而避免了在客户端使用JavaScript进行页面渲染的过程。库，它提供了在服务器端渲染Vue组件的能力。同时，Vue SSR的实现也需要考虑一些额外的配置和优化，如数据预取、路由匹配和状态管理等。Vue SSR的实现需要Vue.js提供的一些工具和库的支持，如。
patch-vue-directive-ssr
05-05
补丁指令 该软件包修补@vue/compiler-ssr ，以使用SSR / SSG构建自定义指令。 - Custom directive is missing corresponding SSR transform and will be ignored. 该修补程序将使所有自定义指令保持原样，以便在运行时解决（除非进行明确配置，否则不进行任何转换）。 待办事项：添加更多说明和问题参考 用法 npm i -D patch-vue-directive-ssr 完毕。 兼容性 使用@vue/compiler-ssr@3.0.7 。
vue中的自定义指令
神秘人
08-06 471
在vue中有很多自定义指令，比如：v-on、v-for、v-text和v-html、v-show和v-if、v-bind、v-model等，在这些指令中，部分指令我们很容易弄混淆。今天我们就来梳理总结下几个比较像是的指令。 v-on 作用：为元素绑定事件 用法： 1，@符号可以代替v-on，其中v-on：后面是点击的方式，=的后面是定义的方法名 2，绑定的方法写在methods属性中 3，也可以传递自定义参数，事件修饰符 如：dolt事件里有两个参数 v-for 作用：根据数据生成列表
QT漂亮QSS样式模仿流行VUE Element UI Tabs ，QSS漂亮大方美观样式 QSS样式 QTabWidget漂亮样式QSS 快速开发QSS漂亮界面
最新发布
weijia3624的专栏
06-12 495
随着Web前端技术的飞速发展，Vue Element UI以其优雅的设计风格、丰富的组件库以及高度的定制性，迅速成为开发者构建现代化用户界面的首选之一。尽管Vue Element UI主要服务于Web应用，其设计理念和视觉风格对桌面应用程序的界面设计同样具有启发意义，尤其是在使用Qt框架开发的项目中，通过Qt的样式表（QSS）技术，我们能够借鉴Element UI的美学特点，提升Qt应用的用户界面美观度和用户体验。 QT漂亮QSS样式模仿流行VUE Element UI Tabs ，QSS漂亮大方美观样式
Vue 自定义指令 （疑难阶级）
risingfine的博客
07-09 333
简介 除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下： 当页面加载时，该元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你...
搭建自己的SSR
weixin_38255079的博客
04-25 7085
搭建自己的SSR 一、基本使用 渲染一个Vue实例 在服务端把 Vue实例渲染为纯文本字符串 mkdir vue-ssr cd vue-ssr npm init -y npm install vue vue-server-renderer // server.js const vue = require('vue') const renderer = require('vue-server-renderer').createRenderer() const app = new Vue({ tem
编写支持SSR的通用组件指南
大转转FE
10-30 6268
原文来自：https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?...
vue3-ssr-demo:一个Vue SSR的例子。使用vue3 + vue router + vuex + typescript编写
04-06
使用vue3 + vue路由器+ vuex +打字稿，编写的SSR演示。 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 ...
如何构建 vue-ssr 项目的方法步骤
10-15
构建Vue服务端渲染（Vue-SSR）项目是一个复杂但又非常重要的技术实践，主要为了提升页面的首屏渲染速度和搜索引擎优化（SEO）。构建一个Vue-SSR项目大致可以分为以下几个步骤： 1. **创建项目结构**：首先，我们...
基于vue-ssr的静态网站生成器VuePress 初体验
08-27
基于Vue-SSR的静态网站生成器VuePress初体验 VuePress是基于Vue的轻量级静态网站生成器，旨在满足Vue自己的子项目文档需求。它提供了预加载的HTML，加载速度极佳，同时对SEO非常友好。VuePress由两部分组成：一个...
core:适用于Vue.js的WordPress模块​​，支持PWA，并完全支持Vuex商店，Vue路由器，Vue SSR和Nuxt.js
05-17
适用于WordPress的Vue.js模块，支持PWA，并完全支持Vuex商店，Vue路由器，Vue SSR和Nuxt.js 注释 分类目录 标签 分类法 外部模块（即将推出） 免费扩展 Yoast SEO扩展（即将推出） qTranslate扩展（即将推出） ...
Part3-4-1 搭建自己的SSR
m0_38066007的博客
08-01 1037
构建同构渲染 构建流程 源码结构 我们需要使用 webpack 来打包我们的 Vue 应用程序。事实上，我们可能需要在服务器上使用 webpack 打包 Vue 应用程序，因为： 通常 Vue 应用程序是由 webpack 和 vue-loader 构建，并且许多 webpack 特定功能不能直接在Node.js 中运行（例如通过 file-loader 导入文件，通过 css-loader 导入 CSS）。 尽管 Node.js 最新版本能够完全支持 ES2015 特性，我们还是需要
SSR+BBR安装记录
Android系统工程师--小馬佩德罗
03-31 6321
0 前言 配置SSR和BBR的一个记录 1 安装SSR wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ssr.sh && chmod +x ssr.sh && bash ssr.sh 这样配置混淆不太容易被停… 2 安装BBR......
react 服务端渲染
weixin_34126557的博客
05-08 133
前言 关于服务端渲染，这是一个老生常谈的事情了，已经很有成熟的方案在里面，最近接触了一下react的服务端渲染方式，偶有心得，为什么我要写这么一篇文章呢，因为我在研究如何开发的时候，发现网上的资料真的不够齐全，很多导致我花费更多的时间，所以我希望能够给予看到我文章的朋友一些帮助 项目github链接：github.com/HuskyToMa/h… 语言描述 ssr： 服务端渲染 前期准备 什么是...
跟我学习搭建一个SSR
weixin_39963436的博客
03-13 3138
Vue SSR 介绍 是什么 官方文档：https://ssr.vuejs.org/ Vue SSR（Vue.js Server-Side Rendering） 是 Vue.js 官方提供的一个服务端渲染（同构应用）解决方案。 使用它可以构建同构应用。 还是基于原有的 Vue.js 技术栈。 官方文档的解释：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏
8.4.1 搭建自己的SSR
w1fl1w的博客
11-21 7144
本文为拉勾网大前端高薪训练营第一期笔记 心得体会 SSR是未来前端页面必不可少的一个组成成分，掌握了Vue SSR基本上其他框架都非常类似。 3-4-1 搭建自己的SSR Vue SSR 介绍 是什么 官方文档:https://ssr.vuejs.org/ Vue SSR(Vue.js Server-Side Rendering) 是 Vue.js 官方提供的一个服务端渲染(同构应用)解决方案 使用它可以构建同构应用 还是基于原有的 Vue.js 技术栈 官方文档的解释:Vue.js 是构建客户端应
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目
个人前端记录
01-07 6023
当然你可以使用免费空间之类的，免费空间本人不太熟悉，这里不做介绍。 这里我是自己买的服务器，腾讯云Centos6.8版本的。为什么腾讯云？便宜呗。我是当初拼团买的。 其实之前有写过一些博客分享自己的服务器搭建。这里为了方便查看，把之前的文章拷贝过来了。 ...
VUE_SSR_Blog搭建
weixin_34185320的博客
05-12 294
历时数月，翻了两版的Blog系统终于上线了，上线了！虽然还有很多地方需要优化的，但是强行推上来了，欢迎大家批评指正~ 简单说下吧，博客分l两个端（两个端放置在同一个项目主体下，通过url不同进行访问...）,前端展示就是如你所见的，还有一个后天管理端目前只开发了图片管理和文章管理两个小模块，后续如有新模块可以随时加入；大体的烹制方法如下：准备上等的vue ssr,以及新鲜出炉的webpack，最...
安装ssr_网易《代号SSR》电脑版教程！
weixin_34186408的博客
01-15 699
不久前网易宣布将推出一款《阴阳师》主题CCG卡牌游戏——《代号SSR》。《代号SSR》是一款和风CCG卡牌游戏。在全新原创战斗规则中，重新诠释经典人物。丰富的策略，公平的对战，绮美的画面，希望带给您全新的CCG竞技体验。游戏在战斗初始双方式神就进入准备区(无需通过手牌抽取)；而所有的手牌都是场上式神的技能(战斗过程中不会打出新的式神)；手牌可以驱动式神进行更多行动或者产生各种效果。在战斗中每名式神...
Vue SSR入门示例：三步骤实现简单前后端渲染
开始阶段，作者提供了一个前端渲染的简单示例，包括一个`index.html`文件，其中引入了Vue和自定义的`App.vue`组件，以及两个子组件`Foo.vue`和`Bar.vue`。这些组件通过`<script>`标签动态加载，并且模板内直接渲染...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值