利用vue cli 3.0安装脚手架。记住:勾选vue-router。

在vue.config.js里添加配置:

2,	var path = require('path')
3, const PrerenderSPAPlugin = require('prerender-spa-plugin');
4, const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
5,
6, module.exports = {
7, configureWebpack: {
8, plugins: [
9, new PrerenderSPAPlugin({
10, staticDir: path.join(__dirname, 'dist'),
11, routes: ['/', '/about', '/contact'],
12, renderer: new Renderer({
13, inject: {
14, foo: 'bar'
15, },
16, headless: false,
17, renderAfterDocumentEvent: 'render- event'
18, })
19, })
20, ]
21, }
22, }

 main.js里添加配置: (标红部分)

1.	new Vue({
2. router,
3. store,
4. mounted () {
5. document.dispatchEvent(new Event('render-event'))
6. },
7. render: h => h(App)
8. }).$mount("#app");

在执行yarn build后,在dist目录里就会生成对应路由的index页面。

如果需要验证,添加http-server。
            sudu yarn global add http-server
       然后在dist目录下,执行命令:http-server ,就可以看到预加载页面。

vue的seo方案 prerender-seo-plugin的更多相关文章

  1. 【网站seo优化】SEO优化每天的工作内容是什么?

    [网站seo优化]SEO优化每天的工作内容是什么?从未知的领域来到seo,感到搜索引擎无比神奇,接触seo久了,有每天必做的工作内容,大量的seo从业者,每天的工作内容大同小异,主要做的工作有通过相应 ...

  2. ASP.NET的SEO: 服务器控件背后——SEO友好的Html和JavaScript

    本系列目录 假设你需要从一个页面转向其他页面,下面有很多种方式,你是如何选择的呢?你能清晰的说明理由么?         <%--链接的表现形式--%>        <asp:Hy ...

  3. SEO高手和SEO屌丝的八个区

    原文:http://www.it28.cn/sousuoyinqing/853085.html SEO这个行业并不规范,有些seo工程师可以拿着高薪,进行一些大型网站的seo工作,其实主要是UEO的工 ...

  4. SEO三种职位类型:编辑型SEO、技术型SEO、营销型SEO详解

    SEO三种职位类型:编辑型SEO.技术型SEO.营销型SEO详解 网站SEO优化作为营销端的服务之一,这些年也呈现出日新月异的格局.一改过去游兵散将式的小作坊生产模式,不断有力量强大的公司团体加入到这 ...

  5. Angular SEO方案

    1.如果是java web项目,可以直接使用AngularSEO Filter. 官网地址 :http://www.angularseo.net/#about <filter> <f ...

  6. SEO方案

    前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有 ...

  7. 大话SEO网站优化|SEO优化入门技术详解

    网络营销 网络营销是借助一切被目标用户认可的网络应用服务平台开展的引导用户关注的行为或活动,目的是促进产品在线销售及扩大品牌影响力. web1.0时代有搜索引擎营销.BBS营销.邮件营销.病毒式营销. ...

  8. 我眼中的SEO——略读一些SEO书后

    近些日子一直在看一些SEO方面的书.为人有些浮躁,读SEO实在读不出太大营养,除了第一本书外,之后的书就是在不停地向后翻页.没有过太具体的实践,现在就来写一下我眼中的SEO.还希望各位多多指教. 1. ...

  9. SEO 网站页面SEO优化之页面title标题优化

    在seo优化中,标题的优化占着举足轻重的地位,无论是从用户体验的角度出发,还是从搜索引擎的排名效果出发,title标题都是页面优化最最重要的因素.笔者总结了优化title标题应该注意的六个方面: ①. ...

随机推荐

  1. mysql 主从同步-读写分离

    主从同步与读写分离测试 一.  实验环境(主从同步) Master                   centos 7.3              192.168.138.13 Slave     ...

  2. 查看Oracle相关日志 ADRCI

    ADRCI 进去以后 show  home  

  3. HTML5游戏开发系列教程5(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...

  4. Python的数据类型和常用方法大全

    数据类型 一.数字 整形int x=10 #x=int(10) print(id(x),type(x),x) 浮点型float salary=3.1 #salary=float(3.1) print( ...

  5. idea 取消控制台的行数限制

    有时候我们要输出大量的信息放到控制台显示,但是多了之后就出现最上面的信息被覆盖删除, 因此就需要设置控制台的显示行数,但在idea7之后的版本中,取消了对控制台行数设置选项, 只能通过更改配置文件进行 ...

  6. Mac OS OpenVpN 连接设置(转)

    下文介绍Mac OS连接使用OpenVPN方法教程,使用的软件是免费开源的Tunnelblick,当然也有其它连接软件,比如Viscosity,不过这个是付费的,还是前面的用的多. 1.下载安装Tun ...

  7. hdu2597 Simpsons’ Hidden Talents

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=2594 题目: Simpsons’ Hidden Talents Time Limit: 2000/1000 ...

  8. 使用tar解压文件报归档中找不到

    1.今天使用tar命令解压jdk安装包时,报如下错误.tar -zxvf jdk-8u181-linux-x64.tar.gz /usr/local/java/ 2.后来查了一下,因为我解压当前的文件 ...

  9. linux系统上使用unzip命令

    最近在本地使用maven打包工程后,将工程部署到linux服务器的tomcat上,使用unzip解压工程报--->未找到命令.即该命名文件未安装,需要安装一下.安装命令如下: yum insta ...

  10. oracle中length、lengthb、substr、substrb用法小结

    我记得我曾经在开发form的时候犯过这样一个错误,对于form中的某个字段,对应于数据库中某张表的字段,假设在数据库中这个字段一般也就用到20个汉字的长度,后来我在开发form的时候,设置item类型 ...