本文目录:
- 1、vue技巧:解决网页静态化的问题
- 2、怎样使用WP静态化插件WP Super Cache
- 3、如何实现网页静态化
vue技巧:解决网页静态化的问题
我们使用vuecli打包出来的vue页面,只有一个html。不错这确实是spa牛逼的地方。
但是对于seo来说,这也是一个致命缺陷。
那就是,完全没法seo。这货连个实体页面都没有。那就很难受了。
此时我们需要借助插件prerender-spa-plugin解决问题。在项目目录输入
这里你需要注意一点,你现在需要设置你的route为history模式。当然我们一直是这个模式,之前有人使用hash模式,那个是不可取的。
接着打开webpack.prod.conf.js这个文件在build文件夹中,添加
然后还是这个文件,找到plugins,在里面加入
注意着里面的地址,是生成静态化以后的目录,这里跟你的route地址是对应的。按照你的route来写。
然后重新输入
完成后是这样的
这只是一个治标不治本的解决办法!因为只有route中的页面被生成了静态页面,我们的内容页面是无法生成静态的。那么这该怎么办呢?如果你既想使用vue那简介的语法进行开发,又希望项目能实现cms那样自动生成静态的功能,你就需要用到一个吊炸天的东西—基于vue的nuxt.js来开发!
请持续关注龙哥的后续教程!
怎样使用WP静态化插件WP Super Cache
然后,激活该插件后,你可以在后台的管理页面的Setting–WP
Super
Cache进行相关设置默认情况下,WP
Super
Cache
是没有开启的,所以在这里选择下,需选择第一个,就是
Caching
On,然后,点击Update
Status开启插件。WP
Super
Cache插件启用后,你还会看到其它的几个选项:Advanced(高级选项)这里主要设置文件缓存的方式,如:是否通过
Mod
Rewrite
实现访问静态文件等内容,如果你不知道该选那个,那么,只要是Recommended(推荐)的都是可以选择的CDN选项:你的网站可能使用了过多的静态文件。另一个网站或者内容分发网络通常提供图像、Javascript和CSS文件等静态文件。因此,该插件将你网站中以下提供的URL替换了网站上的wp内容和wp包含目录中的链接(除了PHP文件)。Preload:它会帮你缓存网站上的每一个页面或者文章,为你常见SpuerCache静态文件,是未知的放开到达缓存页面,它们也会帮你提升Google的排名。
如何实现网页静态化
方法一:使用现成的插件,比如:ISAPI_Rewrite、IIS Rewrite、Apache
HTTP服务器的mod_rewrite等,它们都是基于正则表达式解析器开发的重写引擎。它们的使用方法查看它们自带的帮助即可。
方法二:自己写的代码实现动态网页静态化,方法也有好几种:
1、创建FSO对象,利用此对象将所需的内容动态创建到文件中生成HTML页面;
2、利用模板技术,将模板中特殊代码的值替换为从表单或是数据库字段中接受过来的值 生成HTML文件;
3、使用Server.Transfer转换技术,
方法三:使用HttpWebRequest请求客户端的方式,获取返回资源,生成静态页面。一般这样只需要获取网页内容即可,其它资源可放置在服务器上,自动加载。(注:此方法缺点明显,需要大量更改匹配URL,建议慎用)
方法四:在asp中有IhttpModule接口。Ihttpmodule可以简单理解为一个可以在执行像.aspx,或者mvc中control/action前,添加我们自定义的操作的东西。
我们只需要编写这么一个HttpModule就可以了,当用户第一次请求asp处理时,我们可以在ihttpmodule中拦截到这个请求,然后获取到这次请求应该返回的html代码,然后我们返回这些html给用户,并保存刚才我们获取到的html到文件内,当用户下次请求时,我们只需要直接返回我们已经保存的html文件即可
本文来源:https://www.yuntue.com/post/150299.html | 云服务器网,转载请注明出处!