网络自助新闻发稿平台，价格低，发稿快

对于90%以上的互联网公司来说,前后端分离是必须要做的,

前后端完全分离,做成SPA,怎么做SEO呢,公司的这款产品需要大量的SEO和SEM,国内搜索引擎现在对SPA的SEO并不好。虽然有的公司对这方面没有什么要求,也有的公司干脆直接就花钱弄,所以对代码这块不是很在意。但是还是有很多公司要求网站需要做SEO,既然要做,那么解决这个问题,首先得先想明白什么是SEO,然后再说前后端分离情况下如何做SEO优化。

SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。

最近我的公司大部分是用vue重构了很多老的项目,也开发了很多新项目,有的也用react开发了新项目。就在元旦之前,领导不知道是无聊的时候还是听身边的人说的,他打开公司的网页,然后右击查看源代码,发现代码只有三四行,而看到他朋友公司的网站查看源代码的时候,有上百行代码,而且很整齐,看到文字的时候,至少能知道这个页面是干啥的,但是自己的网站就那几行代码,也看不到中文的文字。所以就找到技术部。就这样脑海里瞬间产生了一个念头,加班这个词语又要常伴自己。

不过之前也没有做过用vue开发的项目怎么做seo,只是知道用vue开发项目不利于seo,就仅仅在index.html页面,把keywords和description相关的文案填了进去,总觉的这样至少比什么都不做要强。现在既然要做这个seo,就一顿操作,看看网上都有什么方法解决的,在vue官网下看到了一个vue SSR,用服务端来渲染页面做搜索引擎,当时就想这作为第二个方案。就想找个更简单的方法,毕竟用ssr来做,这改动太大了,几乎从0开始把整个项目重做一遍。皇天不负有心人,找啊找,总算找到了一个满意的解决方案。

方案一:使用 prerender-spa-plugin

在开发环境下安装

npm install --save-dev prerender-spa-plugin

在 build/webpack.prod.conf.js 文件中引用:

// 放在文件顶部var PrerenderSpaPlugin = require('prerender-spa-plugin')

配置 plugins 列表 (在 build/webpack.prod.conf.js 文件):

new PrerenderSpaPlugin(  // 要编译的目录  path.join(__dirname, '../dist'),  // 你要预呈现的列表  [ '/' ])// 如果你想预呈现/about和/contact,那么列表就是[ '/', '/about', '/contact' ]。

用上面这个方法,确实比较方法,之前写的代码都不用动,只要安装这个插件,然后根据上面配置一下就好了。很开心,三下五除二就把百分之八十的项目用上面这个方法解决了seo问题,但是有的项目就不适合,所以就只能采用下面这个方案解决seo问题。

方案二:vue SSR服务端渲染

https://ssr.vuejs.org/zh/  // Vue SSR 指南

感兴趣的朋友可以根据上面官方网站,然后自己搭建项目,完成一套服务端渲染的网站,如果大家觉得时间不够,或者有点难度的话,可以看看这个链接,https://zh.nuxtjs.org,可以大量的减少你的开发时间。

不管是用yarn还是用npm,前提是yarn或者npm一定装过,这里就不具体说怎么安装了。

用yarn:yarn create nuxt-app <项目名>

 或者用npm :  create-nuxt-app <项目名>

接下来会让你做一些选择,一般只要直接敲回车键就行,具体提示你们在使用上面命令的时候都能看到。

当运行完时,它将安装所有依赖项,因此下一步是启动项目:

$ cd <project-name>$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序。

至于Nuxt.js 这个这么用的,大家可以直接看官网api,讲解的非常详细,只要你能用vue开放项目,看nuxt官方文档,来开发项目也不是问题。这样的话,你不仅解决了seo问题,同时学会了nuxt.js。技术经验就是这样一步一步积累的。