vue-ssr(上)

最新推荐文章于 2022-09-25 16:21:34 发布
最新推荐文章于 2022-09-25 16:21:34 发布
阅读量227 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35828720/article/details/112649234
版权

vue-ssr解决什么问题？

  • spa全部靠的是js来渲染，默认首页显示内容是一个空的div标签，不利于SEO搜索引擎搜索

  • 服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的

  • spa应用会有首页白屏时间过长的问题，服务器渲染的好处是将访问好的数据拼接好给前端，首页白屏时间缩短

服务端渲染的缺点？

需要占用服务器的CPU和内存，前端中的一些生命周期函数无法使用

在这里插入图片描述

vue-ssr使用

使用的包

vue 
vue-server-renderer 
koa
koa-router

示例

template.html: 这里的 <!--vue-ssr-outlet--> 是固定字段

<!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>
    <!--vue-ssr-outlet-->
</body>

</html>

const Koa = require('koa');
const Router = require('koa-router');
const Vue = require('vue');
const VueServerRenderer = require('vue-server-renderer');
const app = new Koa();
const router = new Router();
const path = require('path');
const fs = require('fs');

const vm = new Vue({
    data: {
        name: '张三'
    },
    template: '<div>hello {{name}}</div>'
})

const template = fs.readFileSync(path.resolve(__dirname, 'template.html'), 'utf8');

router.get('/', async (ctx) => {
    ctx.body = await VueServerRenderer.createRenderer(template).renderToString(vm);
})
//使用路由
app.use(router.routes());
app.listen(3000, () => {
    console.log('start server success')
})

通过webpack实现编译vue项目

依赖包
npm i webpack webpack-cli webpack-merge -D
npm i @babel/core @babel/preset-env babel-loader -D
npm i vue-loader vue-style-loader vue-template-compiler -D
npm i css-loader html-webpack-plugin concurrently -D
项目结构
ssr
├── dist
│   ├── client.bundle.js
│   ├── client.html
│   ├── server.bundle.js
│   └── server.html
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── index.ssr.html
├── server.js
├── src
│   ├── App.vue
│   ├── client-entry.js
│   ├── components
│   │   ├── Bar.vue
│   │   └── Foo.vue
│   ├── main.js
│   └── server-entry.js
├── vue-ssr.md
├── webpack.base.js
├── webpack.client.js
└── webpack.server.js
公共webpack配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    mode: 'development',
    output: '[name].bundle.js',
    module: {
        rules: [{
                test: /\.css$/,
                use: ['vue-style-loader', {
                    loader: 'css-loader',
                    options: {
                        esModule: false, //注意配合vue-style-loader使用时需要加上这个属性
                    }
                }]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin() //
    ]
}
客户端webpack配置
const path = require('path');
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    merge
} = reqire('webpack-merge');
const base = require('./webpack.base.js');
module.exports = (base, {
    entry: {
        client: path.resolve(__dirname, './src/client-entry.js')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'),
            filename: 'client.html'
        })
    ]
})
服务端webpack配置
const path = require('path');
cosnt HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    merge
} = reqire('webpack-merge');
const base = require('./webpack.base.js');
module.exports = merge(base, {
    target: 'node', //目标是给node使用
    entry: {
        server: path.resolve(__dirname, './src/server-entry.js')
    },
    output: {
        libraryTarget: 'commonjs2' //让打包后的server.bundle.js用module.exports导出
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.ssr.html'),
            filename: 'server.html',
            excludeChunks: ['server'], //打包后server.html中不引入server.bundle.js
            mimyfy: false, //不压缩，防止<!--vue-ssr-outlet-->被覆盖
        })
    ]
})
index.ssr.html
<!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>
    <!--vue-ssr-outlet-->
    <script src="./client.bundle.js"></script>
</body>

</html>
index.html
<!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>
    <div id="app"></div>
</body>

</html>
main.js
const Vue from 'vue';
const App from './App.vue';

export default () => {
    const app = new Vue({
        render: h => h(App)
    })
    return {
        app
    }
}
client-entry.js
const createApp from './main.js';
const {
    app
} = createApp();
app.$mount('#app');
server-entry.js
const createApp from './main.js';
export default () => {
    const {
        app
    } = createApp();
    return app;
}
server.js
const Koa = require('koa');
const Router = require('koa-router');
const static = require('koa-static');
const VueServerRenderer = require('vue-server-renderer');
const fs = require('fs');
const path = require('path');

const app = new Koa();
cont router = new Router();

const serverBundle = fs.readFileSync(path.resolve(__dirname, './dist/server.bundle.js'));
const template = fs.readFileSync(path.resolve(__dirname, './dist/server.html'));
const render = VueServerRenderer.createBundleRenderer(serverBundle, {
    template
})

router.get('/', async (ctx) => {
    ctx.body = new Promise((resolve, reject) => {
        render.renderToString((err, html) => {
            if (err) reject(err);
            resolve(html);
        })
    })
})

app.use(route.routes())
app.use(static(path.resolve(__dirname, './dist')));
app.listen(3000, () => {
    console.log('start server success');
})
App.vue

这里需要注意的是，在最外层需要添加一个 id='app' , ssr官网上有说 客户端激活 , data-server-rendered 特殊属性，让客户端 Vue 知道这部分 HTML 是由 Vue 在服务端渲染的，并且应该以激活模式进行挂载。注意，这里并没有添加 id=“app”，而是添加 data-server-rendered 属性：你需要自行添加 ID 或其他能够选取到应用程序根元素的选择器，否则应用程序将无法正常激活，

<template>
  <div id='app'>
    <Foo></Foo>
    <Bar></Bar>
  </div>
</template>

<script>
import Bar from "./components/Bar.vue";
import Foo from "./components/Foo.vue";
export default {
  components: {
    Foo,
    Bar,
  },
};
</script>
Bar.vue
<template>
    <div>bar</div>
</template>

<style scoped="true">
div{
    background:red
}
</style>
Foo.vue
<template>
    <div @click="show">foo</div>
</template>
<script>
export default {
    methods:{
        show(){
            alert(1)
        }
    }
}
</script>
西域男孩1028
关注
专栏目录
vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
李知恩李知金
04-18 4213
为了完成vue+ssr，本人呕心沥血翻阅很多博主的文档，并在b站看了很多视频之后，经过个人实践，终于整理出一套完整版，无缺失，不报错的改造流程（亲测！！） 从创建=>打包=>上线部署，详细流程。好用的话点个赞吧！！ 1.通过 vue-cli 创建 vue 项目 vue create 项目名称 2.进入项目安装vue服务端渲染插件vue-server-renderer npm install vue-server-renderer S vue-server-renderer和v
js基础2-函数
二个星星
07-10 601
函数就是包裹在花括号中的代码块，前面使用了关键词 function。 一、定义函数 function myFunction(x){ if(x>=0){ return x; } else { return -x; } } 上述myFunction()函数的定义如下： 1.function关键字指明这是一个函数； 2.myFun...
解决spa白屏方法之ssr及ssr优化
Harley567
09-15 1024
解决spa白屏方法之ssr及ssr优化
js 根据汉字拼音首字母进行排序
早晚的博客
09-25 2万+
js 根据汉字拼音首字母进行排序
js的if(!myFunction())有何用
墨浅
08-27 1498
js的!的作用。js函数的默认返回值。if(!function())有什么用
vue-cli-plugin-ssr：适用于Vue CLI的简单SSR插件
03-01
@ akryum / vue-cli-plugin-ssr Vue CLI的简单服务器端渲染插件（正在进行中） 赞助商 金子 银 青铜 关于 :star: 特征： 自动将项目转换为SSR 集成快递服务器 Vuex商店 异步路由 支持 定制中间件 :rocket: 路线...
vite-vue-ssr从破碎的演示导出
02-22
vite-vue-ssr从破碎的演示导出
Vue-SSR:使用Vue，Node的基于SSR的动态网站构建器
05-17
使用Vue，NodeJS使用SSR的动态主题构建器。 特征 服务器端渲染 渲染前获取异步数据 客户补水 返回您想要的HTTP代码 使用vue-router进行路由 使用vuex进行状态管理 vue-i18n的国际化 静态/编译时i18n 动态/运行时i18...
egg-vue-ssr-demo:使用Eggjs的Vue ssr
05-28
Egg-Vue-SSR-Demo eggjs插件演示 vue-hackernews-2.0 + eggjs = egg-vue-ssr-demo ，可以简单地理解为使用eggjs代替server.js 您也可以将其用作webpack 4.x升级参考 为什么要用鸡蛋来做SSR？ 一个编写前端和后端...
vue-ssr-dome:vue-ssr-dome
04-27
注意：实际上，没有必要对这种大小的应用程序进行代码拆分（每个异步块只有几千字节），也不是提取额外CSS文件（仅为1kb）的最佳选择-它们是之所以使用它，是因为这是一个演示应用程序，其中展示了所有受支持的功能...
优化vue 首屏加载过慢，减少白屏时间
sasha
06-23 891
1. 加速或减少HTTP请求损耗 使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等； 2. 延迟加载 非重要的库、非首屏图片延迟加载，SPA的组件懒加载等； 2. 减少请求内容的体积 开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等； 3. 浏
关于js函数的写法 fun = function(){} fun:{}有什么不同
Manketon的专栏
01-23 3365
这几种方法每一个都有不一样的作用。 1.myfun：function(){} 这个是必须写在对象内部的，这是一个对象的方法，如 1 2 3 var a = {    myfun：function(){}  } 写在外面会报错。 2.任何时候都不要这样写myfun = function(){}，
Nodejs使用nodemailer发邮件
热门推荐
博客
03-16 47万+
一、开启发送者邮箱的SMTP服务 QQ邮箱开启SMTP服务教程 163邮箱开启SMTP服务教程 二、安装nodemailer模块 在node项目目录下，使用cmd运行下面命令 npm install nodemailer --save 如图： nodemailer模块网站 三、写代码 新建一个js文件，命名mailer，然后贴入下面代码： const nodemailer ...
vue SSR 部署详解
weixin_30732487的博客
05-28 6069
先用vuecli初始化一个项目吧。 输入命令行开始创建项目： vue create my-vue-ssr 记得不要选PWA，不知为何加了这个玩意儿就报错。 后续选router模式记得选history模式。 项目就绪后，cd进入，开始改造。 先贴项目结构： 改造main.js、router.js和store.js 根据vuessr官方文档进行路由和代码分割...
VUE SSR项目部署
LKFOOD的博客
03-27 6674
记一次小白痛苦的踩坑经历···· VUE项目中个人感觉还是使用vue官方提供的vue-cli脚手架来构建项目的人比较多，相关的文档也总结了很多，而我的项目是采用vue-ssr即服务器端渲染，项目架构来源与尤大在git-hub上的开源项目——vue-hackernews-2.0，想了解的自行在git-hub上搜索 本篇主要来记录一下项目部署的流程： 1.项目在本地开发完成后，需要打包编译，执行以下命...
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
zhumany_csdn的博客
01-06 3847
几个月前，公司要求（服务端渲染）——用vue-ssr做了个服务端渲染，从起搭建、开发、部署、浏览器渲染到优化，希望对有需要的小伙伴有帮助，若是有不足之处，望指出，一起讨论学习。——几个月过去了，公司又提出，不希望用vue，或是react或angular的ssr，希望用express + 引擎模板 做纯的html的服务端渲染，这个我下次分享，有兴趣的小伙伴可以一起交流学习。 一.前提（为什么使用v...
vue ssr 服务端渲染的理解
越思考越清晰
09-05 8739
简单例子 使用一个页面模板 插值 为每个请求创建一个新的根 Vue 实例 router 服务器端数据预取 混合 修改title 提取css //安装 npm install vue-server-renderer --save // 第 1 步：创建一个 Vue 实例 const Vue = require('vue') const app = new Vue({ ...
vue-ssr的使用方法
vue
05-17 2215
##vue的ssr有什么优势 -ssr服务端渲染（页面在服务端渲染后返回给前端） -spa页面<divid="app"> -多页应用有利于seo优化的原生开发页面很多html -vue-server-rendervue实现了可以在node中解析vue实现将实例渲染成一个字符串 -预渲染（启动一个浏览器生成html，加载这个页面的时候先显示html进行替换，适合静态页面）。 -服务端渲染（更好） ##ssr的缺陷 -1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值