vue开发网站seo优化方法

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

• 回溯算法