vue项目改造SSR（服务端渲染）

缺点：1、SEO问题

2、首屏速度问题

3、消耗性能的问题

优点：

1、更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面

2、首屏渲染速度快

SSR 简单来说就是将页面在服务端渲染完成后在客户端直接展示。

index.template.html

server.js

vue项目是通过虚拟 DOM来挂载到html的，所以对spa项目，爬虫才会只看到初始结构。虚拟 DOM，最终要通过一定的方法将其转换为真实 DOM。虚拟 DOM 也就是 JS 对象，整个服务端的渲染流程就是通过虚拟 DOM 的编译成完整的html来完成的。

需要通过Webpack打包生成两份bundle文件：

Client Bundle，给浏览器用。和纯Vue前端项目Bundle类似

Server Bundle，供服务端SSR使用，一个json文件

不管项目先前是什么样子，是否是使用vue-cli生成的。都会有这个构建改造过程。在构建改造这里会用到 vue-server-renderer 库，这里要注意的是 vue-server-renderer 版本要与Vue版本一样。

打包之后目录结构

vue.config.js

index.template.html

打包成客户端和服务器端

启动node服务

github地址： https://github.com/wang12321/SSR

模板只有一个index.html,多个html难道都写成组件吗？

vue-cli webpack模板,添加多个html文件怎么 *** 作呢？

vue-cli默认创建的项目都是假设你在做单页应用，也就是仅有一个index.html

作为应用入口，剩下的事情都是交由javascript动态处理的。

如果你想直接在vue-cli创建的项目骨架上简单改造成多页面风格，尝试改改

build/webpack.dev.conf.js文件的plugins部分吧：

module.exports = merge(baseWebpackConfig, {

module: {

loaders: utils.styleLoaders()

},

// eval-source-map is faster for development

devtool: '#eval-source-map',

plugins: [

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.HotModuleReplacementPlugin(),

new webpack.NoErrorsPlugin(),

// https://github.com/ampedandwired/html-webpack-plugin

new HtmlWebpackPlugin({

filename: 'index.html',

template: 'index.html',

inject: true

}),

new HtmlWebpackPlugin({

filename: '另一个.html',

template: '另一个模板.html',

inject: true

})

]

})

多个页面可以控制组件的展示隐藏，满足的不了的话可以用vue-router

如果要添加多个html，需要修改webpack配置

entry: {

app1: "./src/app1.js",

app2: "./src/app2.js",

}

---