Vue服务端渲染实践 ——Web应用首屏耗时最优化方案

缘故起因是改革之前，行使客户端渲染时，行使了devServer.proxy署理设置来办理跨域题目，而处事端作为署理处事器对接口提倡异步哀求时，不会读取对应的webpack设置，对付处事端而言会对应哀求当前域下的对应path下的接口。

办理方案为去除webpack的devServer.proxy设置，对付接口哀求带上对应的origin即可：

const requestUrlOriginrequestUrlOrigin = requestUrlOrigin = state.ctx.URL.origin;  
const res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams); 

•  对付vue-router设置项有base参数时，初始化时匹配不到对应路由的题目

在官方示例中的entry-server.js：

// entry-server.js  
import { createApp } from './app';  
export default context => {  
  // 由于有也许会是异步路由钩子函数或组件，以是我们将返回一个 Promise，  
  // 以便处事器可以或许守候全部的内容在渲染前，  
  // 就已经筹备停当。  
  return new Promise((resolve, reject) => {  
    const { app, router } = createApp();  
    // 配置处事器端 router 的位置  
    router.push(context.url);  
    // ...  
  });  
} 

缘故起因是配置处事器端router的位置时，context.url为会见页面的url，并带上了base，在router.push时应该去除base，如下所示：

router.push(context.url.replace('/base', '')); 

小结

本文为笔者通过对现有项目举办改革，给现有项目加上Vue处事端渲染的实践进程的总结。

起首叙述了什么是Vue处事端渲染，其目标、本质及道理，通过在处事端行使Vue的假造DOM，形成初始化的HTML字符串，即应用措施的“快照”。带来极大的机能上风，包罗SEO上风和首屏渲染的极速体验。之后叙述了Vue处事端渲染的根基用法，即两个进口、两个webpack设置，别离浸染于客户端和处事端，别离天生vue-ssr-client-manifest.json与vue-ssr-server-bundle.json作为打包功效。最后通过对现有项目标改革进程，包罗对路由举办改革、数据预获取和状态初始化，并表明白在Vue处事端渲染项目改革进程中的常见题目，辅佐我们举办现有项目往Vue处事端渲染的迁徙。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!