routes: [‘/’,‘/about’,‘/store_vuex’,‘/cssAnimate’,‘/connectMongoDB’,‘/childParent’,‘/child1’,‘/elementUI’],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: ‘bar’
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event(‘render-event’))，两者的事件名称要对应上。
renderAfterDocumentEvent: ‘render-event’
})
})
],
};
}
}
然后要将vue路由的模式改成history
最后mian.js入口文件中要加入这段代码。其中render-event要和vue.config.js中的renderAfterDocumentEvent对应
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event(‘render-event’))
}
}).$mount(‘#app’)
npm run build现在打包之后的目录结构就变成了这样了，以及每个文件夹的index.html代码，
现在的html代码就有了.vue文件中的template相关代码，但是却多了一个问题就是每个文件夹中的index.html代码都引用了所有的js和css文件这是不利于seo优化的。因此还没有结束。
为什么会有这么多js和css呢，因为vue-cli在打包的时候每个.vue文件的script和style标签都会打包成一个对应的js和css，即使你标签里面什么都没有写。
第二步我是压缩合并体积比较小的js和css文件
找了vue-cli的文档没有搜索到相关的资料，因此转战webpack
这个api可以用来设定一个最小的合并文件体积，在上边的webpack配置中的plugins中加入这段代码目测是10000=1kb
const webpack = require(‘webpack’);
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk，将 chunk 体积保持在指定大小限制以上
}),
然后npm run build
还是那个目录，但是js和css缩减了很多。
方法二、Vue SSR (服务器端渲染)
简而言之就是将本来要放在浏览器执行创建的组件，放到服务端先创建好，然后生成对应的html将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。
Vue SSR 相比 SPA（单页应用）好处及坏处
1、好处
更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。
2、坏处
1）开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数(lifecycle hook)中使用；一些外部扩展库(external library)可能需要特殊处理，才能在服务器渲染应用程序中运行。
2）涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序(SPA)不同，服务器渲染应用程序，需要处于 Node.js server 运行环境。
3）更多的服务器端负载。在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源(CPU-intensive - CPU 密集)，因此如果你预料在高流量环境(high traffic)下使用，请准备相应的服务器负载，并明智地采用缓存策略。
具体ssr实现请看后期待续…
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
-
HTTP 常用的请求方式，区别和用途？
-
HTTPS 是什么？具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛？
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛？
-
HTTP 如何实现长连接？在什么时候会超时？
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的，UDP 为什么不可靠？
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法