import createApp from './app'; const { app, router, store } = createApp(); // 客户端把初始化的store替换为window.__INITIAL_STATE__ if (window.__INITIAL_STATE__) { store.replaceState(window.__INITIAL_STATE__); } if (router) { router.onReady(() => { app.$mount('#app') }); } else { app.$mount('#app'); }
常见问题的解决方案
至此，基本的代码改造也已经完成了，下面说的是一些常见问题的解决方案：
在服务端没有window、location对象：
对于旧项目迁移到SSR肯定会经历的问题，一般为在项目入口处或是created、beforeCreate生命周期使用了DOM操作，或是获取了location对象，通用的解决方案一般为判断执行环境，通过typeof window是否为'undefined'，如果遇到必须使用location对象的地方用于获取url中的相关参数，在ctx对象中也可以找到对应参数。
vue-router报错Uncaught TypeError: _Vue.extend is not _Vue function，没有找到_Vue实例的问题：
通过查看Vue-router源码发现没有手动调用Vue.use(Vue-Router);。没有调用Vue.use(Vue-Router);在浏览器端没有出现问题，但在服务端就会出现问题。对应的Vue-router源码所示：
VueRouter.prototype.init = function init (app /* Vue component instance */) { var this$1 = this; process.env.NODE_ENV !== 'production' && assert( install.installed, "not installed. Make sure to call `Vue.use(VueRouter)` " + "before creating root instance." ); // ... }
服务端无法获取hash路由的参数
由于hash路由的参数，会导致vue-router不起效果，对于使用了vue-router的前后端同构应用，必须换为history路由。
接口处获取不到cookie的问题：
由于客户端每次请求都会对应地把cookie带给接口侧，而服务端Web Server Frame作为代理服务器，并不会每次维持cookie，所以需要我们手动把
cookie透传给接口侧，常用的解决方案是，将ctx挂载到全局状态中，当发起异步请求时，手动带上cookie，如下代码所示：
// createStore.js // 在创建全局状态的函数`createStore`时，将`ctx`挂载到全局状态 export function createStore({ ctx }) { return new Vuex.Store({ state: { ...state, ctx, }, getters, actions, mutations, modules: { // ... }, plugins: debug ? [createLogger()] : [], }); }
当发起异步请求时，手动带上cookie，项目中使用的是Axios：
// actions.js // ... const actions = { async getUserInfo({ commit, state }) { let requestParams = { params: { random: tool.createRandomString(8, true), }, headers: { 'X-Requested-With': 'XMLHttpRequest', }, }; // 手动带上cookie if (state.ctx.request.headers.cookie) { requestParams.headers.Cookie = state.ctx.request.headers.cookie; } // ... let res = await Axios.get(`${requestUrlOrigin}${url.GET_A}`, requestParams); commit(globalTypes.SET_A, { res: res.data, }); } }; // ...
接口请求时报connect ECONNREFUSED 127.0.0.1:80的问题
原因是改造之前，使用客户端渲染时，使用了devServer.proxy代理配置来解决跨域问题，而服务端作为代理服务器对接口发起异步请求时，不会读取对应的webpack配置，对于服务端而言会对应请求当前域下的对应path下的接口。
解决方案为去除webpack的devServer.proxy配置，对于接口请求带上对应的origin即可：
const requestUrlOrigin = 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服务端渲染的迁移。