用vue打开服务端的html文件,详解如何使用Vue2做服务端渲染

vue更新到2.0之后，作者就宣告不再对vue-resource更新，并且vue-resource不支持SSR，所以我推荐使用axios,在服务端和客户端可以同时使用。

vue2使用了虚拟DOM,因此对浏览器环境和服务端环境要分开渲染,要创建两个对应的入口文件。

浏览器入口文件 client-entry.js

使用 $mount 直接挂载

服务端入口文件 server-entry

使用vue的SSR功能直接将虚拟DOM渲染成网页

client-entry.js 文件

import { app,store } from './app';

store.replaceState(window.__INITIAL_STATE__);

app.$mount('#app');

在 client-entry.js 文件中引入了app.js,判断如果在服务端渲染时已经写入状态，则将vuex的状态进行替换，使得服务端渲染的html和vuex管理的数据是同步的。然后将vue实例挂载到html指定的节点中。

server-entry 文件

const isDev = process.env.NODE_ENV !== 'production';

export default context => {

const s = isDev && Date.now();

router.push(context.url);

const matchedComponents = router.getMatchedComponents();

if (!matchedComponents.length) {

return Promise.reject({ code: '404' });

}

return Promise.all(matchedComponents.map(component => {

if (component.preFetch) {

return component.preFetch(store);

}

})).then(() => {

return app;

});

};

在 server-en