liorizl-CSDN博客

原创从零搭建vue-ssr详细介绍

ssr是用vue开发中一个常见且复杂的问题，虽然官方推出nuxt来解决此问题，但是了解ssr的原理也是很有必要的，网上也有很多vue-ssr相关的介绍，但是大多讲的不够详细。这里我将从零搭建一个vue-ssr项目，并将期间可能遇到的问题一一解释。如果你对vue-ssr完全不了解可以跟我一步一步将代码敲一遍，敲完后你将对vue-ssr有个深刻的认识。step-01 搭建一个简易的vuestep-02 初识vue-ssrstep-03 开始vue-ssrstep-04 路由step-05 热重载及

2021-02-19 10:07:18 369

原创 step-08 clientManifest及CSS

css前面示例中我们使用css的时候style-loader弹出错误,document is not defined,因为style-loader在将CSS注入html时使用了document对象，而在服务端是没有document对象的。将style-loader换成vue-style-loader,vue-style-loader会将获取到的css通过style的方式注入到html中。由于css-loader的版本问题(我的是5.01),还是不生效。在vue-style-loader源代码中测试看出

2021-02-19 09:59:32 254

原创 step-07 异步数据二

前面说了两种客户端数据预取的方式。有一种情况当组件复用(/foo/1到/foo/2)，由于是同一个路由组件的生命周期不会运行，数据不会更新需要单独处理。vue-router导航守卫里有个beforeRouteUpdate，会在复用的组件里调用该守卫。同样使用全局混入解决Vue.mixin({ beforeRouteUpdate(to, from, next) { const { asyncData } = this.$options if (asyncData

2021-02-19 09:52:23 196

原创 step-06 异步数据一

我们知道vue是响应式的，渲染页面的同时异步获取数据，再将的数据渲染到界面。在服务器中我们只需要服务器返回html就行，不需要响应式数据，并且响应式也会给服务器增加负载。所以渲染html的时候需要已经获取到数据，需要对数据进行预读取。在访问vue网站的时候，切换页面都会通过路由，路由也决定了需要访问和渲染哪些组件，这时候就需要获取到这些组件中的数据，所以数据的预读取我们就在路由中进行。另一个就是在客户端中，在打包的文件client.bundle.js挂载(vueApp.$mount(’#app’) )

2021-02-19 09:44:26 147

原创 step-05热重载及路由守卫

由于代码越来越多，每次改动都要重新打包，相当的不方便，我们加入热重载。使用webpack-dev-middleware和webpack-hot-middleware实现热重载。首先搭建浏览器端的热更新先看看webpack-dev-middleware包的使用方法const webpack = require('webpack');const middleware = require('webpack-dev-middleware');const compiler = webpack({ //

2021-02-19 09:40:41 236

原创 step-04 路由

修改router.jsimport Vue from 'vue'import Router from 'vue-router'// import foo from './components/Foo.vue'// import bar from './components/Bar.vue'const foo = () => import('./components/Foo.vue')const bar = () => import('./components/Bar.vue')V

2021-02-19 09:33:24 140

原创 step-03 开始vue-ssr

开始之前先看看vue ssr相比传统的单页面(SPA)的优势更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。我们的目的是让后端返回html代码，但是返回的html代码都是静态的，还需要在前端对这些代码进行“激活”，让它们能对数据的变化做出反应。这些“激活”的代码bundle.js通过由webpack对vue文件的打包来获得，跟SPA差不多。再将这个bundle进行分割，进行按需加载和

2021-02-19 09:31:20 188

原创 step-02 初识vue-ssr

在vue-ssr中，vue会运行在客户端和服务端，首先安装vue-server-renderer和vue，它们版本必须匹配。先在根目录创建server.js//现在是在nodejs环境下，使用commonjs导入 const Vue = require('vue')const vueRenderer = require('vue-server-renderer')const vueApp = new Vue({ data() { return { str: 'Hello

2021-02-19 09:27:02 238

原创 step-01 搭建一个简易的vue

step-01搭建一个简易的vue开始之前我们先来复习下vue,先搭建一个简单的vue项目。目录下运行 npm init 初始化项目。根目录新建一个webpack.config.js文件，并将移除package.json的main入口，在webpack.config.js里定义入口文件，并添加"private": true。安装webpack(webpack安装的4.X版本,因为这时很多包在webpack5下会出问题,webpack-cli安装的是3.X的版本)以及其他需要的包。{ "na

2021-02-18 17:57:40 233 1

zhangli616的博客