从原理上实现Vue的ssr渲染
前言
本篇文章将从一个实战案例的角度逐步解析vue
服务器端渲染的具体实现方式,整个过程不使用第三方服务器端渲染框架,以讲解底层实现原理为主.
服务器端渲染(ssr
)主要解决了以下两个问题.
- 提升了首页的加载速度,这对于单页应用而言有明显的优势.
- 服务端渲染优化了
seo
.使用服务器端渲染的页面更容易被搜索引擎捕获从而提升网站排名,这一点非常重要.在一些To c
的项目中,如果用户在搜索引擎里面输入关键字后,发现网站搜都搜不出来,那就更谈不上盈利了.只要是跟经济效益挂钩的技术,对于每一个技术人而言都应该重点关注.
在前后端还没分离的那个时代,像JAVA
,PHP
这些老牌编程语言.它们一直都在使用服务器渲染页面,并且多年的沉淀已经发展出了很多成熟的方案.
如今前后端分离已经覆盖了整个行业,前端程序员惯常使用三大框架vue
,react
和angular
开发页面.一旦前端使用这些先进的框架开发出了页面,后台编程语言是JAVA
或PHP
,它们做ssr
就有点束手无力了.老牌编程语言的ssr
只能在自己的生态下做,所以这部分工作就落到了前端同学的头上.
前端一旦接手了ssr
,可以让页面的开发模式和之前保持一致.之前是怎么开发单页面应用的现在依旧怎么开发,只不过是在原来的基础上增加了一些额外的配置.这样在成本花费很低的情况下既让前端程序员保留了过往的开发习惯又让应用支持了srr
.
ssr到底在做什么事
服务器端渲染(srr)
,顾名思义,页面在后台渲染好后再发给前端展示.这要和客户端渲染对照来讲,看如下代码.
//index.js
import Vue from 'vue';
import App from '../App.vue';new Vue({render: (h) => h(App),
}).$mount('#app');//index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"></head><body><div id="app"></div><!-- built files will be auto injected --><script src="http://www.xxx.com/main.js"></script></body>
</html>
前端在开发单页应用的时候会经常碰到上述代码.客户端渲染最明显的特征就是后端发送过来的index.html
里面的app
节点里面内容是空的.那整个客户端渲染流程很容易打通.
- 浏览器输入网址请求服务器
- 后端将一个不含有页面内容的
html
发送给浏览器 - 浏览器接收到
html
开始加载,当读到后面script
处就开始向服务器请求js
资源.此时html
是不含有内容的空模板 - 后端收到请求便把
js
发送给浏览器,浏览器收到后开始加载执行js
代码. - 这个时候
vue
开始接管了整个应用,它便开始加载App
组件,但发现App
组件里面有个异步请求的代码.浏览器便开始向后台发起ajax
请求获取数据,数据得到后便开始渲染App
组件的模板. App
组件所有工作都做完后,vue
便把App
组件的内容插入到index.html
里id
为app
的dom
元素.
从上面客户端渲染的流程来看,后端发送给前台index.html
是不包含页面内容的空模板,页面内容的渲染过程都是浏览器这边完成的,所以这种方式称为客户端渲染
.
srr
和客户端渲染最大区别就是上面第二步,后端直接将一个把内容都填充好的html
发给浏览器渲染.
如此浏览器收到了html
直接渲染就可以了,不需要自己再额外发送请求获取数据渲染模板,正因为这部分工作给省掉了,所以页面的加载速度会变得很流畅.其次由于发送过来的html
本身就是有内容的,搜索引擎就能通过这些内容判端网站的类型和用处,这样便优化了seo
.
小试牛刀
下面来通过一个非常简单的案例从宏观上感受一下服务器端渲染的过程.
import Koa2 from 'koa';
import { createRenderer } from 'vue-server-renderer';
import Vue from 'vue';const renderer = createRenderer();const app = new Koa2();/*** 应用接管路由*/
app.use(async function(ctx) {const vm = new Vue({template:"<div>hello world</div>"});ctx.set('Content-Type', 'text/html;charset=utf-8');const htmlString = await renderer.renderToString(vm);ctx.body = `<html><head></head><body>${htmlString}</body></html>`;
});app.listen(3000);
上面代码的逻辑十分简单,使用koa2
搭建了一个web
服务端,监听3000
端口.
浏览器输入网址localhost:3000
发起请求,请求便会进入到app.use
里面的函数方法.在该函数里,首先定义了一个非常简单vue
实例,随后设置一下响应的数据格式,告诉浏览器返回的数据是一段html
.
重点来了,我们现在在服务器端创建了一个vue
实例vm
.
vm
是什么?它是一个数据对象.
熟悉前后台交互的同学应该都清楚,前后端通信都是通过发送字符串作为数据格式的,比如API
服务器通常采用的json
字符串.vm
它是一个对象,对象是不能直接发送给浏览器的,发送前必须要把vm
转化成字符串.
怎么把一个vue
实例转化成字符串呢?这个过程不能乱转化,因为在创建vue
的实例过程中,可不光只有template
这一个属性,我们还可以给它添加响应式数据data
,我们还可以给它添加事件方法method
.
十分庆幸vue
官网提供了一个插件vue-server-renderer
,它的作用就是把一个vue
实例转化成字符串,使用这个包要先用npm
安装.
通过renderer.renderToString
这个方法,将vm
作为参数传递进去运行,便很轻松的返回了vm
转化后的字符串,如下.
<div data-server-rendered="true">hello world</div>
得到了内容字符串后,把它插入到html
字符串中,最后发送给前端就大功告成了.此时页面上就会显示hello world
.
从上面的案例,可以从宏观上把握服务器端渲染的整个脉络.
- 首先是要获取到当前这个请求路径是想请求哪个
vue
组件 - 将组件数据内容填充好转化成字符串
- 最后把字符串拼接成
html
发送给前端.
上面的vm
是一个非常简单的vue
实例,它只有一个template
属性.现实业务中的vm
要复杂一些,因为随着业务的增长会给vm
集成路由
和vuex
.接下来一一讲解.
路由集成
一般而言项目不可能只有一个页面,集成路由的目的就是为了让一个请求路径匹配一个vue
页面组件,方便项目管理.
在实现srr
的任务里,主要工作是为了在客户端发送请求后能找出当前的请求路径是匹配哪个vue
组件.
创建一个route.js
,填写以下代码.
import Vue from 'vue';
import Router from 'vue-router';
import List from './pages/List';
import Search from './pages/Search';//route.jsVue.use(Router);export const createRouter = () => {return new Router({mode: 'history',routes: [{path: '/list',component: List,},{path: '/search',component: Search,},{path: '/',component: List,},],});
};
在route.js
中定义好路由和页面组件,这和之前前端定义路由的方式一样.如果前端访问根路径,默认加载List
组件.
App
组件也和之前一样,里面只放了一个视口<router-view></router-view>
展现内容.
回到服务器端的入口文件index.js
中,引入上面定义的createRouter
方法.
import Koa2 from 'koa';
import { createRenderer } from 'vue-server-renderer';
import Vue from 'vue';
import App from './App.vue';
import { createRouter, routerReady } from './route';const renderer = createRenderer();const app = new Koa2();/*** 应用接管路由*/
app.use(async function(ctx) {const req = ctx.request;const router = createRouter(); //创建路由const vm = new Vue({router,render: (h) => h(App),});router.push(req.url);// 等到 router 钩子函数解析完await routerReady(router);const matchedComponents = router.getMatchedComponents();//获取匹配的页面组件if (!matchedComponents.length) {ctx.body = '没有找到该网页,404';return;}ctx.set('Content-Type', 'text/html;charset=utf-8');const htmlString = await renderer.renderToString(vm);ctx.body = `<html><head></head><body>${htmlString}</body></html>`;
});app.listen(3000);
- 使用
createRouter()
方法创建一个路由实例对象router
,把它注入到Vue
实例中. - 随后执行
router.push(req.url)
,这一步非常关键.相当于告诉Vue
实例,当前的请求路径已经传给你了,你快点根据路径寻找要渲染的页面组件. await routerReady(router);
执行完毕后,就已经可以得到当前请求路径匹配的页面组件了.matchedComponents.length
如果等于0
,说明当前的请求路径和我们定义的路由没有一个匹配上,那么这里应该要定制一个精美的404
页面返回给浏览器.matchedComponents.length
不等于0
,说明当前的vm
已经根据请求路径让匹配的页面组件占据了视口.接下来只需要将vm
转化成字符串发送给浏览器就可以了.
浏览器输入localhost:3000
,经过上面的流程就能将List
页面内容渲染出来.
vuex集成
同构
路由集成后虽然能够根据路径渲染指定的页面组件,但是服务器渲染也存在局限性.
比如你在页面组件模板上加一个v-click
事件,结果会发现页面在浏览器上渲染完毕后事件无法响应,这样肯定会违背我们的初衷.
怎么解决这样的棘手的问题呢?我们还是要回到服务器端渲染的本质上来,它做的主要的事情就是返回一个填充满页面内容html
给客户端,至于后面怎么样它就不管了.
事件绑定,点击链接跳转这些都是浏览器赋予的能力.因此可以借助客户端渲染来帮助我们走出困境.
整个流程可以设计如下.
- 浏览器输入链接请求服务器,服务器端将包含页面内容的
html
返回,但是在html
文件下要加上客户端渲染的js
脚本. html
开始在浏览器上加载,页面上已经呈现出静态内容了.当线程走到html
文件下的script
标签,开始请求客户端渲染的脚本并执行.- 此时客户端脚本里面的
vue
实例开始接管了整个应用,它开始赋予原本后端返回的静态html
各种能力,比如让标签上的事件绑定开始生效.
这样就将客户端渲染和ssr
联合了起来.ssr
只负责返回静态的html
文件内容,目的是为了让页面快点展现出来.而客户端的vue
实例在静态页面渲染后开始接管整个应用,赋予页面各种各样的能力,这种协作的方式就称为同构
.
下面通过代码演示一遍上述流程加深理解.
为了实现同构
,需要增加客户端渲染的代码.新建client/index.js
作为webpack
构建客户端脚本的入口.
import Vue from 'vue';
import App from '../App.vue';
import { createRouter } from '../route';const router = createRouter(); //创建路由new Vue({
router,
render: (h) => h(App),
}).$mount('#app', true);
webpack
跑完上面的客户端代码,会把它们打包生成一个bundle.js
.这里的代码和之前唯一有点区别的就是$mount('#app', true)
后面多了一个true
参数.
加上这个true
的原因也好理解,由于ssr
把渲染好的静态html
发给浏览器渲染后,客户端开始接管应用.
但是当前这个路径所访问的页面已经被后台渲染好了,不需要客户端vue
实例再渲染一遍.加个true
参数就让客户端的vue
实例只对当前的模板内容添加一些事件绑定和功能支持就行了.
在ssr
的入口文件index.js
里,需要添加如下代码.
import Koa2 from 'koa';
import { createRenderer } from 'vue-server-renderer';
import Vue from 'vue';
import staticFiles from 'koa-static';
import App from './App.vue';
import { createRouter, routerReady } from './route';const renderer = createRenderer();const app = new Koa2();/*** 静态资源直接返回*/
app.use(staticFiles('public'));/*** 应用接管路由*/
app.use(async function(ctx) {... //省略ctx.body = `<html><head></head><body>${htmlString}<script src="/bundle.js"></script></body></html>`;
});app.listen(3000);
从上面修改的内容可以看出来仅仅只是在原来的基础上做了一点小修改,在ctx.body
返回的html
加了一个script
标签让浏览器执行客户端渲染的配置.
为了让浏览器能够顺利请求到这个bundle.js
,需要执行app.use(staticFiles('public'))
.这句代码的含义就是如果请求路径是静态资源,直接将public
文件夹下的资源返回给客户端.
通过上面这一轮配置,就能使被ssr
渲染的静态页面在客户端赋予各种能力.一旦html
文件在浏览器上加载完毕后,ssr
的使命就完成了,后面的所有事情比如页面跳转,交互操作都是客户端js
脚本的vue
实例在接管,到了此时就和前端之前熟悉的场景没有区别了.
vuex的配置
现在假设List.vue
的模板内容如下.
<template><div class="list"><p>当前页:列表页</p><a @click="jumpSearch()">go搜索页</a><ul><li v-for="item in list" :key="item.id"><p>城市: {{item.name}}</p></li></ul></div>
</template>
从上可以看出模板并不全都是静态的标签内容,它下面要渲染一个城市列表.而城市列表数据list
是放在远程一个JAVA
服务器上.
这时就出现了问题.首先是客户端输入链接localhost:3000/list
请求node
服务器,node
拦截请求后根据/list
路径找到了当前要渲染的页面是List.vue
,于是就开始加载组件的内容.
结果在这个组件内部发现它需要渲染的数据在远程服务器上,那么当前的node
服务器必须要先去请求远程服务器把数据取回来,取回来后才能渲染List.vue
,最后再把生成的字符串返回给浏览器.
为了顺利实现上面的流程,需要借助vuex
的能力.
- 在项目根目录下创建
vuex/store.js
.
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export function createStore() {return new Vuex.Store({state: {list: [],name: 'kay',},actions: {getList({ commit }, params) {return new Promise((resolve)=>{commit("setList",[{name:"广州"},{name:"深圳"}]);resolve();},2000)},},mutations: {setList(state, data) {state.list = data || [];},},});
}
这份vuex
的配置和前端之前的做法没区别.定义了一个action
方法getList
获取城市列表.在getList
方法里使用定时器模拟远程请求延时返回数据.
- 客户端集成
vuex
import Vue from 'vue';
import App from '../App.vue';
import { createRouter } from '../route';
import { createStore } from '../vuex/store';const router = createRouter(); //创建路由const store = createStore();new Vue({router,store,render: (h) => h(App),
}).$mount('#app', true);
List.vue
文件增加异步获取数据的方法.
<template><div class="list"><p>当前页:列表页</p><a @click="jumpSearch()">go搜索页</a><ul><li v-for="item in list" :key="item.name"><p>城市: {{item.name}}</p></li></ul></div>
</template><script>
export default {asyncData({ store, route }) {return store.dispatch("getList");},computed: {list() {return this.$store.state.list;},},methods: {jumpSearch() {this.$router.push({path: "search",});},},
};
</script>
在组件上增加一个asyncData
方法,获取远程数据.
ssr
集成vuex
.在服务器端渲染入口文件index.js
添加store
.
import { sync } from 'vuex-router-sync';...省略/*** 应用接管路由*/
app.use(async function(ctx) {const req = ctx.request;const router = createRouter(); //创建路由const store = createStore(); //创建数据仓库// 同步路由状态(route state)到 storesync(store, router);const vm = new Vue({router,store,render: (h) => h(App),});router.push(req.url);...省略const matchedComponents = router.getMatchedComponents();//获取当前路由匹配的页面组件await Promise.all(matchedComponents.map((Component) => {if (Component.asyncData) {return Component.asyncData({store,route: router.currentRoute,});}}));const htmlString = await renderer.renderToString(vm);...省略})
首先先创建一个store
仓库,然后要使用sync
将路由状态同步一下,注入到vue
实例中,最后还需要使用Promise.all
将页面组件的asyncData
执行一遍.
将上面这几个步骤再梳理一遍.现在页面组件模板List.vue
的数据放在远程服务器,需要加载了数据才能渲染.
首先给List.vue
增加一个asyncData
函数,这个函数一旦触发就会启动vuex
里面的action
请求远程数据.
现在浏览器打开链接localhost:3000/list
.服务器端渲染入口文件index.js
接管了这个请求后,发现要渲染的页面的组件是List.vue
.
于是node服务器
开始执行Promise.all
后面代码检查一下List.vue
下有没有定义asyncData
函数,如果定义了就赶紧执行这个函数去请求远程数据.数据返回后同步到store
仓库中,紧接着整个vue
实例会因为vuex
的数据变化重新渲染,List.vue
将远程数据填充在模板上,最后将vue
实例转化成html
字符串返回给浏览器.
脱水
现在ssr
和客户端都配置了vuex
,但区别是服务端的store
里面放着List.vue
需要的远程请求的数据,而客户端的store
是空的.
这样就会造成一个问题.页面本来很好的在浏览器展现,突然闪烁一下,List.vue
页面模板的城市列表的数据消失了.
为什么会这样呢?srr
返回的静态html
是带着城市列表的,一旦客户端的vue
接管了整个应用就会展开各种各样的初始化操作.客户端也要配置vuex
,由于它的数据仓库是空的所以重新引发了页面渲染.致使原本来含有城市列表的页面部分消失了.
为了解决这个问题,就要想办法让ssr
远程请求来的数据也给客户端的store
发一份.这样客户端即使接管了应用,但发现此时store
存储的城市列表数据和页面保持一致也不会造成闪烁问题.
在ssr
的入口文件加上如下代码.
ctx.body = `<html><head></head><body>${htmlString}<script>var context = {state: ${JSON.stringify(store.state)}}</script><script src="/index.js"></script></body></html>`;
其实就是将服务器端store
里面的数据转化成字符串放到js
的变量里再一起返回给浏览器.
这样的好处就是客户端的脚本就可以访问context.state
拿到远程请求的数据.
将数据从服务器端注入到客户端js
的过程就称之为脱水
.
注水
服务器端将数据放入了js
脚本里,客户端此时就可以轻松拿到这份数据.
import Vue from 'vue';
import App from '../App.vue';
import { createRouter } from '../route';
import { createStore } from '../vuex/store';const router = createRouter(); //创建路由const store = createStore();if (window.context && window.context.state) {store.replaceState(window.context.state);
}new Vue({router,store,render: (h) => h(App),
}).$mount('#app', true);
在客户端入口文件里加上store.replaceState(window.context.state);
.如果发现window.context.state
存在,就把这部分数据作为vuex
的初始数据,这个过程称之为注水
.
装载真实数据
上面在vuex
里是使用定时器模拟的请求数据,接下来利用网上的一些开放API
接入真实的数据.
对vuex
里的action
方法做如下修改.
actions: {getList({ commit }, params) {const url = '/api/v2/city/lookup?location=guangzhou&key=9423bb18dff042d4b1716d084b7e2fe0';return axios.get(url).then((res)=>{commit("setList",res.data.location); })}}
现在重新把流程捋一捋,服务端根据请求路径要加载List.vue
,发现了里面有异步调用的方法asyncData
,便开始运行这个方法.
asyncData
一运行就会走到上面actions
里面的getList
,它就会对上面那个url
地址发起请求.但仔细观察发现这个url
是没有写域名的,这样访问肯定会报错.
那把远程域名给它加上去行不行呢?如果这样硬加是会出现问题的.有一种场景就是客户端接管应用它也可以调用getList
方法,我们写的这部分vuex
代码可是服务端和客户端共用的.那如果客户端直接访问带有远程域名的路径就会引起跨域.
那如何解决这一问题呢?这里的url
最好不要加域名,以/
开头.那样客户端访问这个路径就会引向node
服务器.此时只要加一个接口代理转发就搞定了.
import proxy from 'koa-server-http-proxy';export const proxyHanlder = (app)=>{app.use(proxy('/api', {target: 'https://geoapi.qweather.com', //网上寻找的开放API接口,支持返回地理数据.pathRewrite: { '^/api': '' },changeOrigin: true}));
}
定义一个中间件函数,在执行服务器端渲染前添加到koa2
上.
这样node
服务器只要看到以/api
开头的请求路径就会转发到远程地址上获取数据,不会再走后面服务器端渲染的逻辑.
服务器端路径请求的问题
使用上面的代理转发之后又会带来新的问题,设想一种场景.如果浏览器输入localhost:3000/list
后,node
解析请求发现要加载List.vue
这个页面组件,而这个组件又有一个asyncData
异步方法,因此就运行异步方法获取数据.
actions: {getList({ commit }, params) {const url = '/api/v2/city/lookup?location=guangzhou&key=9423bb18dff042d4b1716d084b7e2fe0';return axios.get(url).then((res)=>{commit("setList",res.data.location); })}}
这个异步方法就是getList
,注意此时执行这段脚本的是node
服务器,不是客户端的浏览器.
浏览器如果请求以/
开头的url
,请求会发给node
服务器.node
服务器现在需要自己请求自己,只要请求了自己设置的代理就能把请求转发给远程服务器,而如今node
服务器请求以/
开头的路径是绝对无法请求到自己的,这个时候只能用绝对路径.
我们上面提到这部分的vuex
代码是客户端和服务端共用的,最好不用绝对路径写死.还有一个更优雅的方法,就是对axios
的baseURL
进行配置生成带有域名的axios
实例来请求.那这部分代码就可以改成如下.
export function createStore(_axios) {return new Vuex.Store({state: {list: [],name: 'kay',},actions: {getList({ commit }, params) {const url = '/api/v2/city/lookup?location=guangzhou&key=9423bb18dff042d4b1716d084b7e2fe0';return _axios.get(url).then((res)=>{commit("setList",res.data.location); })},},mutations: {setList(state, data) {state.list = data || [];},},});
}
_axios
是配置基础域名后的实例对象,客户端会生成一个_axios
,服务端也会生成一个,只不过客户端是不用配置baseURL
的.
import axios from "axios";//util/getAxios.js/**
* 获取客户端axios实例
*/
export const getClientAxios = ()=>{const instance = axios.create({timeout: 3000,});return instance;
}/**
* 获取服务器端axios实例
*/
export const getServerAxios = (ctx)=>{const instance = axios.create({timeout: 3000,baseURL: 'http://localhost:3000'});return instance;
}
通过生成两份axios
实例既保持了vuex
代码的统一性,另外还解决了node
服务器自己访问不了自己的问题.
cookie如何处理
使用了接口代理之后,怎么确保每次接口转发都能把cookie
也一并传给远程的服务器.可以按如下配置.
在ssr
的入口文件里.
***省略 **
* 应用接管路由,服务器端渲染代码
*/
app.use(async function(ctx) {const req = ctx.request;//图标直接返回if (req.path === '/favicon.ico') {ctx.body = '';return false;}const router = createRouter(); //创建路由const store = createStore(getServerAxios(ctx)); //创建数据仓库***省略 })
在创建ctx
和axios
实例的时候将ctx
传递进去.
/**
* 获取服务器端axios实例
*/
export const getServerAxios = (ctx)=>{const instance = axios.create({timeout: 3000,headers:{cookie:ctx.req.headers.cookie || ""},baseURL: 'http://localhost:3000'});return instance;
}
将ctx
中的cookie
取出来赋值给axios
的headers
,这样就确保cookie
被携带上了.
样式处理
.vue
页面的文件通常把代码分成三个标签<template>
,<script>
和<style>
.
<style scoped lang="scss"></style>
上还可以添加一些属性.
和客户端渲染相比,实现ssr
的过程要多处理一步.即将<style>
里面的样式内容提取出来,再渲染到html
的<head>
里面.
在ssr
入口文件index.js
添加如下代码.
...省略const context = {}; //创建一个上下文对象htmlString = await renderer.renderToString(vm, context);ctx.body = `<html><head>${context.styles ? context.styles : ''}</head><body>${htmlString}<script>var context = {state: ${JSON.stringify(store.state)}}</script><script src="./bundle.js"></script></body></html>`;
服务端提取样式的过程非常简单,定义一个上下文对象context
.
renderer.renderToString
函数的第二个参数里传入context
,该函数执行完毕后,context
对象的styles
属性就会拥有页面组件的样式.最后将这份样式拼接到html
的head
头部里即可.
Head信息处理
常规的html
文件的head
里面不仅包含样式,它可能还需要设置<title>
和<meta />
.如何针对每个页面设置个性化的头部信息,可以利用vue-meta
插件.
现在需要给List.vue
页面组件添加一些头信息,可以按如下设置.
<script>
export default {metaInfo: {title: "列表页",meta: [{ charset: "utf-8" },{ name: "viewport", content: "width=device-width, initial-scale=1" },],},asyncData({ store, route }) {return store.dispatch("getList");}...省略}
在导出的对象上添加一个属性metaInfo
,在其中分别设置title
和meta
;
在ssr
的入口文件处加入如下代码.
import Koa2 from 'koa';
import Vue from 'vue';
import App from './App.vue';
import VueMeta from 'vue-meta';Vue.use(VueMeta);/*** 应用接管路由*/
app.use(async function(ctx) {...省略const vm = new Vue({router,store,render: (h) => h(App),});const meta_obj = vm.$meta(); // 生成的头信息router.push(req.url);...省略htmlString = await renderer.renderToString(vm, context);const result = meta_obj.inject();const { title, meta } = result;ctx.body = `<html><head>${title ? title.text() : ''}${meta ? meta.text() : ''}${context.styles ? context.styles : ''}</head><body>${htmlString}<script>var context = {state: ${JSON.stringify(store.state)}}</script><script src="./index.js"></script></body></html>`;
});app.listen(3000);
通过 vm.$meta()
生成头信息meta_obj
,待到vue
实例加载完毕后,执行meta_obj.inject()
获取被渲染页面组件的meta
和title
数据,再将它们填充到html
字符串即可.
这样一来浏览器访问localhost:3000/list
,返回的html
文件的头部就会包含上面定义的title
和meta
信息.
源码
完整代码
结尾
上面这一整套流程走下来还是挺复杂的,服务器端渲染的难点不是在于本身技术存在难度.而是整个流程有些复杂,要处理的细节非常多.但如果真的将这些原理都吃透,那么不光是vue
框架,像react
和angular
都可以按照同样的思路去实现服务器端渲染.
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 各种集合类型底层实现原理
①HashMap的工作原理 HashMap基于hashing原理,我们通过put()和get()方法储存和获取对象。当我们将键值对传递给put()方法时,它调用键对象的hashCode()方法来计算hashcode,让后找到bucket位置来储存值对象。当获取对象时,通过键对象…...
2024/4/21 14:32:45 - 遇到面试vue-router原理
前端三大框架Vue,React,Angular,他们都是单页面应用开发的,所以利用路由的跳转非常有必要的,vue-router,react-router,angular-router都是基于前端路由原理进行封装实现的,所以我们使用起来非常方便,只会使用还不行,刚…...
2024/4/23 13:03:25 - Taro多端开发实现原理与项目实战(一)
Taro 多端开发实现原理与项目实战 前端多端统一开发背景与趋势介绍 背景 「大前端」不仅会成为移动开发与 Web 前端的发展趋势,也会是未来的显示设备终端的开发技术趋势? 越来越多的业内人士对此表示肯定,因为终端碎片化和 Serverless 让这…...
2024/4/26 12:20:56 - 埋线埋线双眼皮冷敷消肿吗
...
2024/4/25 5:07:26 - 埋线双眼皮宽度多少
...
2024/4/26 8:33:56 - npm安装教程,启动下载好前端项目
原地址 一、使用之前,我们先来掌握3个东西是用来干什么的。 npm: Nodejs下的包管理器。 webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli: 用户生成Vue工程模板。(帮…...
2024/4/21 14:32:39 - 解决npm下载慢的问题,cnpm加速npm下载速度
Node 越来越流行了,通过npm扩展的插件已经成千上万,只有你想不到,没有做不到的插件。但是我们不是经常造轮子,我们会使用别人的类库了,强大的npm可是前端的好基友,我们经常使用它给我们下好多的插件&#x…...
2024/4/21 14:32:39 - npm方式下载一个包文件
2019独角兽企业重金招聘Python工程师标准>>> npm是什么? npm是一个平台网站,关于JavaScript的全球注册平台。 干嘛用? 你可以上传自己的模块或者插件文件,下载别人的模块插件文件。 上传: 要按规范…...
2024/4/27 2:40:08 - npm 设置下载源
npm config set registry https://registry.npm.taobao.org npm config get registry npm install -g cnpm --registryhttps://registry.npm.taobao.org...
2024/4/27 19:22:05 - 修改npm下载地址——淘宝地址
转载自:https://blog.csdn.net/quuqu/article/details/64121812 第二种已验证可用 1.临时使用 npm --registry https://registry.npm.taobao.org install express 2、持久使用 npm config set registry https://registry.npm.taobao.org 配置后可通过下面方式来…...
2024/4/21 14:32:36 - 解决npm经常下载过慢甚至卡住不动的问题
解决npm经常下载过慢甚至卡住不动的问题 在我们安装完Node.js之后,需要使用npm命令来安装一些工具。 可气的是使用npm命令会下载很慢或者直接卡住不动,相信大家也经常为此事烦恼。 而造成这种情况的原因是:npm的下载地址是国外的。 解决方案…...
2024/4/26 19:41:35 - npm的安装
Step1. 进入网站 https://nodejs.org/en/download/ 会出现如下图所示的页面 点击下载安装即可。 Step2. 打开cmd 输入 echo %PATH% 查看环境变量是否添加进去,如图所示证明已经添加进去啦 Step3.输入 node-v 和 npm-v 确认node和npm的版本号 这时可以进入 “C:\U…...
2024/4/27 3:10:35 - 下载安装npm和cnpm
下载安装npm http://nodejs.cn/download/ 下载安装cnpm 完成npm的安装后,再安装cnpm https://npm.taobao.org/ 切换源为 taobao 源 npm set registry https://registry.npm.taobao.org/ 安装cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装vue-cli h…...
2024/4/27 11:04:08 - 更改npm默认下载路径
1.打开命令行:输入: npm config ls 查看默认安装路径 npm config set prefix "your setting path" 设置路径,如:"D:\local software manager\download\node\node local resposity" 2.更换…...
2024/4/26 12:41:08 - 关于 npm 安装angular报错‘code EEXIST‘,ERR! path C:\Users\Administrator\AppData\Roaming\npm\node_modules
记录一次npm 安装报错code EEXIST已存在解决方法! 本人学习angular过程中 ,发现使用package.json 里面的scripts 方式运行 angular正常!! 但是直接使用 ng 命令时发现报错 去到C:\Users\Administrator\AppData\Roaming\npm\no…...
2024/4/27 9:40:33 - npm下载指定版本包文件
npm init 创建, 然后只需要在组件的后面加上 2.8.1 版本号即可, 例如:react-router已经更新到4.x版本,想要下载2.x版本,可以通过下面命令 npm install --save-dev react-router2.8.1...
2024/4/20 15:21:53 - 解决npm依赖包无法下载的问题
解决npm依赖包无法下载的问题 遇到了npm install无法下载依赖包,出现打包报错的问题;npm install下载依赖包的时候不会下载devDependencies中的内容; 解决方法: npm config set production false 配置成 false,意思是…...
2024/4/21 14:32:33 - 使用npm安装下载jQuery
打开命令框,然后cd到你要下载的路径下,执行以下命令: 后面加的是版本号 npm i jquery1.11.0执行结果是: λ npm i jquery1.11.0 npm WARN saveError ENOENT: no such file or directory, open K:\BaiduYunDownload\feedback\pack…...
2024/4/25 10:33:19 - npm设置下载源
npm config set registry https://registry.npm.taobao.org npm config get registry sudo npm install -g vue/cli --registryhttps://registry.npm.taobao.org...
2024/4/21 14:32:31 - 埋线双眼皮宽的效果图
...
2024/4/21 14:32:29
最新文章
- 记录取值精度丢失的问题
记录取值精度丢失的问题 问题描述 访问第三方接口,查的数据丢单了,跟踪查询接口,发现某个单id查不到数据。将原始返回结果拉出来一看,发现有单的id值产生了变化。 分析 单id最终处理类型是Long ,与实际差异1。接收…...
2024/4/27 21:59:10 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - Python读取文件里内容
如果要读取一个文件里的内容是 # 文件名:db.txt 1 2 3 4代码如下 import requests f open("db.txt", mode"rb") content f.read() f.close()data content.decode(utf-8)# 存到 list 里 data_list data.split(\r\n) print(data_list)# 结果…...
2024/4/23 6:37:22 - PHP+python高校教务处工作管理系统q535p
开发语言:php 后端框架:Thinkphp/Laravel 前端框架:vue.js 服务器:apache 数据库:mysql 运行环境:phpstudy/wamp/xammp等 系统根据现有的管理模块进行开发和扩展,采用面向对象的开发的思想和结构化的开发方…...
2024/4/26 8:31:01 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/26 18:09:39 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/26 20:12:18 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/26 23:05:52 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/27 4:00:35 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/26 21:56:58 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/27 9:01:45 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/25 18:39:16 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/26 22:01:59 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/26 23:04:58 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/25 18:39:00 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/26 19:46:12 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/27 11:43:08 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/27 8:32:30 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57