Vue SSR服务端渲染

最新推荐文章于 2024-03-30 09:39:10 发布
最新推荐文章于 2024-03-30 09:39:10 发布
阅读量289 收藏
点赞数
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43383325/article/details/125053500
版权

一、一个最简单的vue SSR demo

1. 安装vue-server-renderer express

npm i vue-server-renderer express -D

2.在根目录下创建server.js

const express = require('express')
const app = express()
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

app.get('/', (req, res) => {
    const vm = new Vue({
        template: `<div>hello ssr</div>`
    })
    renderer.renderToString(vm).then(html => {
        res.send(html)
    })
})

app.listen(3000, () => {
    console.log('服务器启动了！')
})

3. 执行node, 访问3000端口

node ./server.js

 二、在项目一的基础上修改（添加router）

1. 创建src/router/index.js

const Vue = require('vue')
const VueRouter = require('vue-router')

Vue.use(VueRouter);

const routes = [{
        path: "/",
        name: "home",
        component: {
            template: `<div>hello page</div>`
        },
    },
    {
        path: "/about",
        name: "about",
        component: {
            template: `<div>about page</div>`
        }
    },
];

module.exports = function createRouter() {
    return new VueRouter({
        mode: "history",
        routes,
    });
}

2.创建src/app.js

const Vue = require('vue')
const createRouter = require('./router')


Vue.config.productionTip = false

module.exports = function createApp(context) {
    const router = createRouter()
    const app = new Vue({
        router,
        data: {
            msg: 'hello ssr'
        },
        template: `
            <div>
                <h1>{{msg}}</h1>
                <nav>
                    <router-link to="/">Home</router-link> |
                    <router-link to="/about">About</router-link>
                </nav>
                <router-view/>
            </div>
        `
    })
    return {
        app,
        router
    }
}

3. 创建src/entry-server.js

const createApp = require('./app.js')

module.exports = (context) => {
    return new Promise(async(resolve, reject) => {
        let { url } = context
        let { app, router } = createApp(context)
        router.push(url);
        router.onReady(() => {
            resolve(app)
        }, reject)
    })
}

4. 创建src/entry-client.js

const createApp = require('./app.js')
const { app, router } = createApp(context)

router.onReady(() => {
    app.$mount('#app')
})

5. 在/根目录下创建index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello, SSR</title>
</head>

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

</html>

6.修改/server.js

const express = require('express')
const app = express()
const path = require('path')
const fs = require('fs')
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync(path.join(__dirname, './index.html'), 'utf-8')
})
const App = require('./src/entry-server.js')

app.get('*', async(req, res) => {
    const { url } = req
    const vm = await App({ url })
    renderer.renderToString(vm).then(html => {
        res.send(html)
    }).catch(err => console.log(err))
})

app.listen(3000, () => {
    console.log('服务器启动了！')
})

7.执行node ./server.js 访问localhost:3000，到此为止router就可以切换页面了

三、通过webpack打包

1、通过vue-cli创建项目

2、安装以下库

npm i webpack-node-externals lodash.merge cross-env express vue-server-renderer -D

3、在根目录下创建index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello, SSR</title>
</head>

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

</html>

4、创建/src/app.js

import Vue from 'vue'
import createRouter from './router'
import App from './App.vue'

Vue.config.productionTip = false

export default function createApp() {
    const router = createRouter()
    const app = new Vue({
            router,
            render: h => h(App)
        })
    return {
        app,
        router
    }
}

5、创建/src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from '@/views/HomeView.vue'
import AboutView from '@/views/AboutView.vue'

Vue.use(VueRouter);

const routes = [{
        path: "/",
        name: "home",
        component: HomeView
    },
    {
        path: "/about",
        name: "about",
        component: AboutView
    },
];

// 返回一个创建router的方法
export default function createRouter() {
    return new VueRouter({
        mode: "history",
        routes,
    });
}

6、创建/src/entry-server.js

import createApp from './app.js'

export default (context) => {
    return new Promise(async(resolve, reject) => {
        let { url } = context
        let { app, router } = createApp(context)
        router.push(url);
        // 进入首屏
        router.onReady(() => {
            resolve(app)
        }, reject)
    })
}

7、创建/src/entry-client.js

import createApp from './app.js'

const { app, router } = createApp(context)

router.onReady(() => {
    app.$mount('#app')
})

8、创建/server,js

const express = require('express')
const app = express()
const path = require('path')
const fs = require('fs')
const { createBundleRenderer } = require("vue-server-renderer");
const serverBundle = require('./dist/server/vue-ssr-server-bundle.json');
const clientManifest = require('./dist/client/vue-ssr-client-manifest.json');
const renderer = createBundleRenderer(serverBundle, {
    runInNewContext: false,
    template: fs.readFileSync(path.join(__dirname, './index.html'), 'utf-8'),
    clientManifest
})

app.get('*', async(req, res) => {
    try {
        const context = {
            url: req.url,
            title: 'ssr test'
        }
        const html = await renderer.renderToString(context);
        // eslint-disable-next-line no-console
        console.log(html);
        res.send(html);
    } catch (error) {
        res.status(500).send("服务器内部错误");
    }
})

app.listen(3000, () => {
    console.log('服务器启动了！')
})

9、修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const nodeExternals = require('webpack-node-externals')
const merge = require('lodash.merge')
const TARGET_NODE = process.env.WEBPACK_TARGET === 'node'
const target = TARGET_NODE ? 'server' : 'client'

module.exports = defineConfig({
    transpileDependencies: true,
    css: {
        extract: false
    },
    outputDir: './dist/' + target,
    configureWebpack: () => ({
        entry: `./src/entry-${target}.js`,
        devtool: 'source-map',
        target: TARGET_NODE ? 'node' : 'web',
        node: TARGET_NODE ? undefined : false,
        output: {
            libraryTarget: TARGET_NODE ? 'commonjs2' : undefined
        },
        externals: TARGET_NODE ?
            nodeExternals({
                allowlist: [/\.css$/]
            }) : undefined,
        optimization: {
            splitChunks: TARGET_NODE ? false : undefined
        },
        plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
    }),
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                merge(options, {
                    optimizeSSR: false
                })
            })
    }
})

10、修改package.json的打包命令

    "scripts": {
        "build:client": "vue-cli-service build",
        "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
        "build": "npm run build:server && npm run build:client"
    },

11、 通过npm run build进行打包

12、执行node ./server.js运行express server， 访问localhost:3000

weixin_43383325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue ssr服务端渲染(小白解惑)
12-13
初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的； 网上有非常多的vue服务渲染的...
vue 新建的页面如何访问_Vue骨架屏实现方案一：Vue-Server-Renderer
weixin_39597323的博客
11-22 208
作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也在困扰着开发者们。那么有没有一个办法，也能让SPA用上骨架屏呢？这就是这篇文章将要探讨的问题。何为骨架屏关于这个问题，读者...
vue+vuex+vue-router+axios+koa+vue-server-render，APiCloud
从人到猿
10-24 822
vue 1. 是什么 是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 **渐进式： ** 可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发，不会做职责之外的事 自底向上增量开发的设计先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。 2....
推荐项目：Vue-SSR-Demo - 前端渲染的新境界
最新发布
gitblog_00069的博客
03-30 286
推荐项目：Vue-SSR-Demo - 前端渲染的新境界 项目地址:https://gitcode.com/leocoder351/vue-ssr-demo 项目简介 Vue-SSR-Demo 是一个基于 Vue.js 的服务器端渲染（Server-Side Rendering, SSR）示例项目。由开发者 [leocoder351](https 创建，旨在帮助开发者理解和实践 Vue.js 的 ...
在Vue 3中如何实现服务端渲染（SSR）
2301_77795034的博客
07-07 2673
它就像是一个魔术师，能让你的网页在服务器上就预先渲染好，然后发送到客户端。想象一下，你在浏览一个网页，一点开链接，页面就直接出现在你面前，就像变魔术一样，这就是SSR的作用！当你在Vue 3中实现SSR时，你需要确保在服务器端和客户端之间正确传递数据。这可以通过在服务器端渲染时，将数据附加到HTML中，然后在客户端从HTML中提取数据。在SSR中，你可能需要管理全局状态，以确保服务器端和客户端的状态保持一致。要在Vue 3中使用SSR，我们需要先安装一个称为“vue-server-renderer”的库。
vue-server-renderer
beichen3997的博客
04-25 3647
此软件包提供Vue 2.0的Node.js服务器端呈现。 安装 API 渲染器选项 为什么使用 bundleRenderer? 创建服务器捆绑 组建缓存 客户端结合 (id:installation) <a name="installation" /> <span id="installation">跳转到这里</span> <a name=...
在vue项目中实现SSR(服务端渲染)
yuran1的博客
07-09 2639
SSR也被叫做服务端渲染，就是将vue中客户端渲染HTML的过程放在服务端实现，然后再把渲染好的HTML内容返回给客户端。
vue服务端渲染ssr
qq_43548590的博客
11-10 1616
vue服务端渲染ssr
Vue项目使用SSR服务器渲染
Niall_Tonshall的博客
03-04 5300
注意：这是笔者用于记录自己学习SSR的一篇文章，用于梳理将一个项目进行服务器渲染的过程，本文仅是读者根据demo得出的理解，如果您想通过本文来学习如何部署ssr，笔者建议您查阅其他更权威的资料进行学习；当然，如果您发现了本文中有任何描述不恰当的地方，还恳请您指出更正。 ...
vue服务端渲染SSR
javascript_good的博客
06-20 2814
SSR解决方案，后端渲染出完整的首屏的dom结构返回，前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行，这种页面渲染方式被称为服务端渲染 (server side render)服务器端渲染的是应用程序的"快照"，如果应用依赖于一些异步数据，那么在开始渲染之前，需要先预取和解析好这些数据。创建一个express服务器，将vue ssr集成进来，./server/02-simple-ssr.js。修改服务器启动文件，现在需要处理所有路由，./server/04-ssr.js。
Vue SSR 服务端渲染深度解析及实践
weixin_44781409的博客
06-03 4637
一 . SSR 的优缺点 更利于SEO 不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本（Google除外，据说Googlebot可以运行javaScript）。使用了Vue或者其它MVVM框架之后，页面大多数DOM元素都是在客户端根据js动态生成，可供爬虫抓取分析的内容大大减少。另外，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异...
如何使用vite，做vue3.0的服务端渲染(ssr)
Emperor灬fly的博客
02-24 1万+
新春伊始，想必在座的各位都正在嗷嗷待哺的等待需求中(ps:划水摸鱼)，不好意思，理直气壮的说我也是。几天鱼摸下来，心里也不是滋味，看着身边的同学一个个每天都在学这学那，搞得我也不是很好意思。于是趁着现在各种完全体的方案和框架还没出来之前，那我们把vue3.0的服务端搭一搭吧，自己写写还是很有意思的。 好了，废话就先到此，开局调研了基于webpack和vue-cli去搭，途中碰到了一些问题就放弃了，由于尤大最近很痴迷于vite，vue-cli相关的生态也有些滞后。于是反手就一手vite搞起，看看到底有什么魔力
Egg Vue SSR 服务端渲染数据请求与asyncData
10-15
主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue服务端渲染(SSR)初探
01-19
还有就是首屏加载过慢这种问题，比如在SPA中，打开首页需要初始加载很多资源，这时考虑在首屏使用服务端渲染，也是一种折中的优化方案。但是使用SSR时，势必会增加服务器的压力，还有可能会需要前后端同构，使用同样...
服务端渲染 Vue SSR
油墨香^-^的博客
09-08 438
前言SSR大家肯定都不陌生，通过服务端渲染，可以优化SEO抓取，提升首页加载速度等，我在学习SSR的时候，看过很多文章，有些对我有很大的启发作用，有些就只是照搬官网文档。通过几天的学习，我对SSR有了一些了解，也从头开始完整的配置出了SSR的开发环境，所以想通过这篇文章，总结一些经验，同时希望能够对学习SSR的朋友起到一点帮助。我会通过五个步骤，一步步带你完成SSR的配置：纯浏览器渲染服务端渲染，不包含Ajax初始化数据服务端渲染，包含Ajax初始化数据服务端渲染，使用和进行优化。
vue如何利用vue-server-renderer做服务端渲染
weixin_40073115的博客
03-16 2626
本篇博文初步探索使用vue-server-renderer做服务端渲染一个最简单的页面，学会如何用vue做ssr 环境准备 koa,koa-router,vue,vue-server-renderer cnpm install vue --save cnpm install vue-server-render --save-d cnpm install koa --sava cnpm in...
vue ssr搭建服务端渲染项目
qq_190265950的博客
03-24 501
什么是服务器端渲染 (SSR) Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。 为什么使用服务器端渲染 1.更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染
vue：服务端渲染技术
weixin_34253539的博客
03-02 335
服务端渲染： 简单说：比如说一个模板，数据是从后台获取的，如果用客户端渲染那么浏览器会先渲染html和css，然后再通过js的ajax去向后台请求数据再更改渲染。就是在前端再用Node建个后台，把首屏数据加载成一个完整的页面在node建的后台渲染好，浏览器拿到的就是一个完整的dom树。根据项目打开地址，路由指到哪个页面就跳到哪。 服务端比...
Vue SSR(vue服务端渲染)
热门推荐
qq_40407998的博客
03-21 1万+
Vue SSR(vue服务端渲染)
深入学习Vue SSR服务端渲染 用Nuxt.js打造CNode社区
08-23
### 回答1： Vue SSR（Server Side Rendering）服务端渲染是一种在...通过深入学习Vue SSR服务端渲染和使用Nuxt.js打造CNode社区，我们可以提升自己的前端开发技能，并且能够快速构建出高效、可扩展的Vue SSR应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值