仓库在人们眼中一直是低效、高成本的地方，即便是增加人手也很难做好仓库管理。那么我们应该采取哪些方式来管理，才能做到降本增效呢？首先我们需要先了解仓库主要作业流程及在作业中存在的痛点。1、入库流程a.商品SKU太多，部分形状相同，容易因收货人对货物不熟悉会造成收货错误；b.入库数量多，手动登记，工作量大，易出错；c.部分商品有特殊属性，例如日期、批次、SN码等，增加了登记工作量和出错率；d.上架人员存在作业随意性，出现货品乱放、随手放置货品、乱扔货品情况，并且忘记做库位登记；e.想要对近段时间的入库情况进行查询，缺乏准确数据报表参考。
2、出库流程a.手写和整合拣货单，拣货顺序和路径无规律，增大工作量；b.拣货人员全凭记忆拣货，对熟练工的依赖导致仓库作业效率低，支出的成本高；c.拣货人员拿着拣货单去拣货，拣完一个打个勾，存在重复拣取、拣错、漏拣等情况；d.对于出错的拣货作业，需要花费不少时间进行修改；e.复核环节全依赖于检查人员对产品的熟悉度，所以发错货，拣错料的情况经常发生；f.难以做到先进先出，呆滞料产生较多，周转率较低；g.想要对近段时间的出库情况进行查询，缺乏准确数据报表参考3、库存管理流程a.人工盘点库存，效率低、出错率高，难以做到账实一致；b.库存数据更新靠人工录入，工作量大，易出错，有时还会忘记录入，出现二次采购；c.库存查询困难，很难了解每个商品的库存多少；d.缺货的商品不知道采购，不缺货的商品却不断采购进来；e.缺乏详细的库存报表查看。对于以上的仓库流程难点，引入WMS系统的话，可以轻松解决，效果如下：
1、入库流程a.收货时，员工用PDA扫描商品条码收货，让系统来判断收货是否正确。收货完成后，WMS会根据订单生成对应的收货任务和上架任务；b.上架时，系统提示上架库位，员工按照提示进行上架，并扫商品条码和库位条码，系统会记录商品存放的储位和数量；c.对于特殊的商品，PDA可以直接采集效期、生产日期、批次号等，再配合系统的储位管理可以高效的管控效期、批次、SN号，还可以通过不同的场景来设置不同的分配规则；d.对于成功验收并上架的货品，会实时更新入库报表，让你可以清楚了解每天、每月的入库情况。
2、出库流程a.通过波次策略，可以自动整合并生成打印单，让拣货顺序和路径有规律，无需走回头路，减轻员工工作量；b.先进先出策略，优先拣取入库时间早的商品，提升库存周转率；c.系统自动提示每个商品存放库位，员工按照提示进行扫描下架即可；d.PDA扫描复核，自动与系统数据核对，出错自动提醒，保证出库准确率；e.系统可完整记录每个作业环节和相关工作量，形成有效追溯链条，并实现计件工资管理以及员工KPI考核；f.对于成功下架并出库的货品，会实时更新出库报表，让你可以清楚了解每天、每月的出库情况。3、库存管理a.PDA自动采集库存数据，并在事后自动更新到WMS系统上，无需人工二次录入；b.PDA扫描盘点，速度快，准确率高，并能生成盘点报表，确保账实一致；c.对每个商品库存库存、库龄进行设置，低于设定值提醒补货，高于则停止进货，并想办法降低库存；到了设定日期，自动提醒，避免过期销售；d.详细的库存报表，让你清楚每个商品库存有多少。4、外部系统和仓储设备集成a.可以与ERP、SAP等外部系统无缝集成，打破信息孤岛，实现仓库数据和财务数据一体化管控；b.可以与agv小车、货架、机械手、智能叉车无缝对接，发挥设备更大使用价值，提升仓库自动化程度现在越来越多的企业已经意识到WMS系统的重要性，企业需要通过WMS系统来辅助管理，加强对仓库作业的控制，掌握仓库的实时情况，并可指导工人作业，降低对作业人员的经验要求，从而实现仓库降本增效的目标。
推荐阅读：快消品仓库管理必备技能，你的物流你要懂！仓库管理量化指标，你满足吗？仓库布局讲技巧，高效运营不再难！“双十一”超详细的仓库备战手册，请查收！仓库盘点秘籍，值得你学习第三方物流的甲方货主要关心什么？如何获得他们的信任第三方物流移仓经验要点哪些KPI指标适用于第三方物流仓储管理？仓库爆仓?那是你没有做好库位规划！制造业仓库整改计划方案「完整版」6S现场管理实施方法与技巧仓库主管必须具备的十项管理能力高效的仓库运营是怎样一种状态？叉车作业34种事故分析-引以为戒，安全生产如何知道自己需要多大仓库？如何计算所需面积？双11来了，你的仓库准备好了吗？库存准确率影响因素及改善方法最全仓库管理标语汇总82页完整的6S目视化管理手册，拿走不谢！仓储主管如何对仓储团队建设的各阶段进行督导双11将至，电商仓库如何保障库存准确率这样的SOP，员工怎么可能不执行？仓储定额管理与货物堆码五五化物流人需掌握的11个仓储管理量化指标计算方法仓储经理必看！仓库选址的考察细节不容忽视仓库转型升级，可落地执行的7个关键点！怎样的仓管员才有资格被提升到仓库主管的岗位？如何做好一个仓库主管呢？最大程度的提高仓库管理效率，这些点你做到了吗？三版未来物流中心！你更喜欢哪一版？【精华】仓库管理人员管好仓库最重要的三点这95条6S管理标准，绝对干货！仓库精细管理的二十四字真言不懂仓储管理？看看WMS是如何“乘风破浪”的仓库老员工离职，新人快速上手的培训原则这样做SOP，才有效果！仓库物流都是用机器人干活了！构建高水平的仓储运营，离不开这几点！仓储管理的全流程SOP操作示范！做好仓库安全管理，这些仓库常见隐患图不得不看！身为仓库主管，仓库管理混乱，该怎么办？实用 || 仓库常用商品堆码方式，哪种适合你？实用10招，教你提高仓库库存准确率货位分配遵循什么原则？货位分配原则及注意事项一览！应聘仓库主管要懂什么？管理中的七大浪费，比生产七大浪费更严重看板管理的实施与注意事项仓库管理全攻略！改善仓管现状轻而易举！经典6S培训教材库存管理机器人，数秒搞定高位货架盘点视频案例 亚洲最大智慧物流基地里的黑科技叉车安全管理培训仓库管理一目了然，记住“989”要点！  生产型企业仓库现场管理问题与解决方案  如何实现仓储货品的精细化管理？  通过库位规划，提高仓储作业效率！更多精彩点击

WMS仓储管理在第三方物流企业的整体业务当中发挥着非常重要的作用。在如今，具备强大的仓储管理能力是企业能够在众多竞争者当中突出重围的重要支持力量。
第三方物流企业应该如何改善仓库管理问题？
仓储管理业务是第三方物流企业核心工作，因此众多的物流企业纷纷选择了专业的WMS系统来管理仓储业务。WMS系统是管理好仓库一个因素，除此之外还需相应制度的建立与执行，流程优化等。

仓储管理常见的问题有哪些
一.仓库管理工作流程问题
大多数的第三方物流企业都有仓库管理作业方面的独特流程，但其中也存在很多问题。

例如，有些第三方物流企业规定应审核入库后才能做出库，先打单。再发货。但有时客户的货较多，卸货所需的时间较长，导致入出库等待时间长、效率低下。
所以，在实际操作过程中，为了缩短客户提货的等待时间，并不能全部按照按企业的规定来做，而是根据客户的提货单先发货，再做出库单，这样一来就增大了企业管理的难度。
客户的需求在变，对企业服务水平的期望越来越高。企业需要满足客户的要求乃至为客户提供个性化服务，对仓库管理工作流程作进一步优化，显得尤其必要。
二.仓库管理制度问题
第三方物流企业对于规章制度也很重视，但很多都是比较粗略的规定，并没有非常详细的细则，随意性很大。
三.员工缺乏相应的培训提升机制
物流从业人员素质普遍较低，中小型物流企业尤甚，特别是基层员工素质需要提高。很多员工的专业素质不高，文化修养不足，具备专业物流教育背景的员工更是少之又少。企业在这方面需要加大人才体系的建设，争取从外部聘请相关的专业人士培训员工，提升他们的专业素质。
四.绩效考评问题
每家第三方物流企业情况各不相同，在这里总结以下几条考评制度的原则，作为大家制定相应考评机制的依据。
企业应当对相应的岗位进行较为细分的分析，分析工作的性质、繁简难易、责任重轻，执行工作应具备的学识技能与经验，进而制定担任工作所需的资格条件，编制规范、实用、细致的岗位说明书，明确岗位职责，规范岗位管理。

除以上之外，还需要对现有岗位、职责和定位进行重新核定和评价，进行职级排序，确定点值，建立职位等级结构。打破传统的岗位等级工资制，合理拉开收入差距，体现激励性、公平性。
最后，应制订绩效改进计划，并且对改进计划的实施要由中小型物流企业相关部门进行监督。
蓝海汇WMS智慧仓储物流系统在第三方物流领域已经取得快速的市场增长和广泛的客户满意度。蓝海汇将不断的推出新的功能，深化第三方物流的仓储管理的深度改变。我们注重客户的效率与成本，在构建、导入、使用WMS智慧仓库管理系统的过程中，提供全方位的服务与保障，让客户获得持久的价值。

出品丨蓝海汇（ID:lanhaihui2015）

转载请联系授权

	

重要性
普通仓库项目中存储成本是主要成本项，包含仓租、存储系统折旧、电费、仓库管理费等。传统2B业务的存储成本通常占成本的50% 左右。如今每个物流企业所租用的仓库租金类似，要提供有竞争的仓库价格，必须充分地提高仓库的空间及面积利用率。合理的存储方案设计，需要兼顾成本、效率、安全性、可靠性、通用性、可操作性等。成功的存储方案是物流企业赢得新客户的重要基础，同时也为企业内部存储项目优化提供参考。
    存储方案设计主要包含大货架(托盘)和中小型货架(料箱或纸箱)。设计前需要充分了解客户产品的特点、订单特点、周转速度、操作的颗粒度要求以及仓库参数、货架和叉车成本等，这些是准备仓储方案设计的基础信息。
这里我们不做详细展开。
 大货架(托盘)
Ø  单深位货架(singleselective)
Ø  窄巷道货架又称VNA货架(very narrow aisle)
Ø  双深位货架(double deep)
Ø  驶入式货架又称为贯通式货架或通廊式货架(drivein)
Ø  重力式货架(辊道式货架)(gravityrack)
Ø  穿梭式货架(shuttle rack)
Ø  自动化立体货架AS/RS(Automatic Storage and Retrieval System)
Ø  托盘四向穿梭车式立体库(fourd irection shuttle rack)
中小型货架(料箱或纸箱)
Ø  单层搁板式货架
Ø  阁楼式货架
Ø  料箱式存储货架和Kubo搬运机器人组合
Ø  料箱式存储货架和 Kiva搬运机器人组合
Ø  料箱式自动化立体仓库(Mini-load)，
Ø  料箱存储系统 - 多层穿梭车
Ø  料箱存储系统 - 四向穿梭车
总成本最优
指在在满足客户的存储和效率要求时，通常基于同一个仓库或不同的仓库，有多种可行的设计方案。各自成本项目间常常是此消彼涨的状态，是Trade-off。此时，我们需要根据总成本最优的分析方法来寻找服务合同期内经济效益最优的解决方案。当然有些电商项目，客户的设计是以效率优先作为原则，我们下次可以探讨此话题。
其他考虑因素
   合理的存储方案设计，需要兼顾成本、效率、安全性、可靠性、通用性、可操作性等。
Ø  效率：避免方案设计本身有缺陷，满足不了效率要求或产生操作瓶颈。
Ø  安全性：存储方案应规避设备本身和人员操作中存在的安全隐患。
Ø  峰值：高峰时段的操作如何来保证，有无替代或补充方案满足操作货量。
Ø  可靠性：存储系统的稳定可靠，故障率低，当故障发生时有应急和替代方案。
Ø  通用性：既要考虑定制客户项目的特殊性也要兼顾其他客户项目的通用性。
Ø  可操作性：操作团队经过培训后容易上手，不会误操作。
在实际的存储方案设计中，还有很多的沟沟坎坎，也涉及到当操作颗粒度变化下设计的柔性问题。希望下次再做探讨。
感谢您的阅读，期待合作，长按图片关注公众号。
如需咨询请联系孙先生 Email：Support@sh-sryl.com , Tel: 13472449940 或 季先生 13818803058   
                 

目前的的前端项目为基于vuecli3搭建的spa项目，由于需求提出需要对首页，部分内容页面做seo优化，涉及到前端项目的框架和部分页面的改造。

目录
SEO简介
关于收录
关于链接
一、预渲染
二、ssr服务端渲染
三、nuxt

SEO简介
SEO（Search Engine Optimization）：汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。

搜索引擎判断一个网站权重高低的尺度无非两个：收录和链接。

目前百度spider抓取新链接的途径有两个：

一是主动出击发现抓取

二就是从百度站长平台的链接提交工具中获取数据，其中通过主动推送功能“收”上来的数据最受百度spider的欢迎。
关于收录

完整的head信息

<head>
  	<title>PKS信创产业生态平台-为PKS生态建设赋能</title>
    <meta name="description" content="PKS信创产业生态平台是国内第一个PKS线上适配平台、第一个基于飞腾2000+ cpu的公有云服务、第一个以PKS为核心的知识内容平台，能为PKS生态合作伙伴、开发者和终端用户提供多样性PKS生态支撑性服务，提升生态服务能力。">
  <meta name="keyword" content="PKS信创产业生态平台,信创,飞腾云主机,麒麟操作系统,自主云服务器,PKS适配迁移,飞腾处理器">
</head>


良好的页面语义化

<header id="header" class="web">
	<h1 id="logo">
	   <a href="/" target="_blank" title="鹏翔书画装裱培训">书画字画装裱培训_裱字裱画学习 - 山东曹州（菏泽）鹏翔书画装裱培训中心</a>
	</h1>
</header>
<nav id="nav" class="web_">
	<ul class="web">
		<li class="nav_home"><a href="/" class="nav_on">网站首页</a></li>
		<li><a href="/single_About_1.html">中心简介</a></li>
		<li><a href="/article_ZhuangBiaoZhiShi_2.html">装裱知识</a></li>
		<li><a href="/article_ZhuangBiaoZaTan_3.html">装裱杂谈</a></li>
		<li><a href="/article_ZhuangBiaoZhaoSheng_4.html">招生信息</a></li>
		<li><a href="/ZhuangBiao_ZhuangBiaoZuoPin_5.html">装裱作品</a>
		</li><li><a href="/video_ZhuangBiao_6.html">装裱视频</a></li>
		<li><a href="/ZhuangBiao_ZhuangBiaoJiaoXue_7.html">现场教学</a></li>
		<li><a href="/article_zhuanyejieshao_10.html">专业介绍</a></li>
		<li><a href="/single_contact_8.html">联系我们</a></li>    
	</ul>
</nav>
<section id="banner" class="cf">
	<ul>
		<li>
		  <img src="/image/banner1.jpg" alt="三分画，七分裱——书画字画装裱的艺术魅力">
		</li>
		<li>
		  <img src="/image/banner2.jpg" alt="继承传统技法，发扬中华文化——鹏翔书画装裱培训">
		  </li>
	</ul>
</section>


内容

有固定的更新频率。最起码也要一周一篇内容的更新。否则，搜索引擎会判断你的网站是死站，权重就会下降的。这里需要注意的是频率，不要一次性更新很多，然后很长时间不更新。
内容一定要有原创性。
坚持更新。每一条都要设置关键词和描述，并且不雷同。
如果是图片类内容的添加，一定要附注一些图片相关的文字内容。搜索引擎自己识别图片内容的效率非常低下，因此文字是不可缺少的。
视频或者其他媒体内容，比照图片处理。



关于链接
链接分为三种，一种是网站内部的链接，简称内链。比如从首页进入栏目页面，从栏目页面进入内容页面。第二种是网站外部链接，简称外站链接。第三种是别人的网站给你的网站的链接，简称外链。下面我逐一阐述。

网站内链设计

在网站内，尽量让网页形成交叉的网状链接设计。很多企业网站在设计得时候，到达了内容页面之后，只能返回到列表页面再进入另外一条内容，这样的树状链接设计是低效的。

简单的做法是在内容页面加上“上一篇”、“下一篇”这样的链接，可以让蜘蛛从一个内容页面直接进入另一个内容页面。从而达到网状内链的目的。

但是仅仅是如此是不够的。我个人建议在内容页面下面最好加上一个“相关内容”的模块，里面可以罗列一些与内容相关的其他的内容链接，十条还是二十条随便，根据排版来即可。

有条件的话，可以让这部分内容是活的，也就是随机的。这样爬虫进来的时候，会不断的得到不同的内容，从而抓取到更多的内容。
外站链接设计

一句话总结，尽可能的少。尽量让蜘蛛来到你的网站后，就在你的网站里面转圈，走不出去才好。
外链设计

一句话总结，尽可能的多！

基础做法是和其他站长交换友情链接，进阶做法是花钱买一些外链。但要注意的是，要找同类型的网站或者相关的站点来做。
这里有一个误区是将所有的外链都指向你的网站的首页。这也不是不可以，但是我们还可以做得更好一些，就是有针对的链接到你的特定内容的内页，效果会更好。比如，你提供某服务项目，你有一个内页是专门介绍这个项目的，那么在其他站点增加一个链接到你这个内页，效果也是很好的。
如果你有较强的内容生产能力，可以写一些优秀的文章，然后让其他网站转载你的文章，并标注首发地址是你的这个文章的网址，这样效果会很好的。
还有就是找大型网站做软文，比如写一些公司的创办理念，创始人的介绍等等，全部都链接到你的网站，效果也是很好的。



目前前端所面临的的问题是内容无法被爬虫获取，页面的title,keyword,descriptions等无法动态变化

经过调研后，目前有以下几种解决方案提供：
一、预渲染
构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已经有静态数据，需要ajax数据的部分未构建。

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如首页，关于我们，联系我们 等）的 SEO，那么你可能需要预渲染。

增加prerender-spa-plugin puppeteer两个依赖

npm install prerender-spa-plugin puppeteer
修改vue.config.js

config.plugins.push(
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),

          // Optional - The location of index.html
          // indexPath: path.join(__dirname, '../dist', 'index.html'),

          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/school'],

          // 预渲染代理接口
          // server: {
          //   proxy: {
          //     '/api': {
          //       target: 'http://localhost:9018',
          //       secure: false
          //     }
          //   }
          // },

          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            // headless: false,
            renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            args: ['--no-sandbox', '--disable-setuid-sandbox']
          })
        })
      )


在入口main.js中添加

new Vue({
  router,
  store,
  // 添加mounted，不然不会执行预编译
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  },
  render: h => h(App)
}).$mount('#app')


运行打包命令npm run build后根据配置出现文件


放到nginx中进行测试，效果如图



总结：

配合vue-meta-info可以针对spa的vue项目配置单独的title,meta,keyword,descriptions等
预渲染无法渲染异步加载的数据
配置简单，开箱即用，对原有框架基本没有影响
需要路由为history模式

二、ssr服务端渲染
在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步 ssr.vuejs.org

与传统 SPA (单页应用程序 (Single-Page Application)) 相比，服务器端渲染 (SSR) 的优势主要在于：

更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。


请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript

应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax

获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO

对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。


更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content) 与转化率直接相关」的应用程序而言，服务器端渲染 (SSR) 至关重要。

针对spa项目的修改(vue-cli3)：

引入相关依赖

npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev
在根目录下新建server.js

服务端使用koa2

npm install koa koa-static --save --registry=https://registry.npm.taobao.org

// server.js
// 第 1 步：创建一个 Vue 实例
const Vue = require("vue");

const Koa = require("koa");
const app = new Koa();
// 第 2 步：创建一个 renderer
const renderer = require("vue-server-renderer").createRenderer();


// 第 3 步：添加一个中间件来处理所有请求
app.use(async (ctx, next) => {
  const vm = new Vue({
    data: {
      title: "ssr example",
      url: ctx.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  });
  // 将 Vue 实例渲染为 HTML
  renderer.renderToString(vm, (err, html) => {
    if(err){
      ctx.res.status(500).end('Internal Server Error')
      return
    }
    ctx.body = html
  });
});

const port = 3000;
app.listen(port, function() {
  console.log(`server started at localhost:${port}`);
});



新增template.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>


修改main.js
// main.js
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from "./router";

// 导出一个工厂函数，用于创建新的
// 应用程序、router 和 store 实例
export function createApp () {
  const router = createRouter();
  const app = new Vue({
    router,
    // 根实例简单的渲染应用程序组件。
    render: h => h(App)
  })
  return { app,router }
}


创建entry-client.js文件
import { createApp } from './main'

// 客户端特定引导逻辑……
const { app } = createApp()

// 这里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')


创建entry-server.js文件
import { createApp } from "./main";

export default context => {
  // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  // 以便服务器能够等待所有的内容在渲染前，
  // 就已经准备就绪。
  return new Promise((resolve, reject) => {
    const { app, router } = createApp();

    // 设置服务器端 router 的位置
    router.push(context.url);

    // 等到 router 将可能的异步组件和钩子函数解析完
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      // 匹配不到的路由，执行 reject 函数，并返回 404
      if (!matchedComponents.length) {
        return reject({
          code: 404
        });
      }
      // Promise 应该 resolve 应用程序实例，以便它可以渲染
      resolve(app);
    }, reject);
  });
};



修改router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export function createRouter(){
  return new Router({
    mode: 'history', //一定要是history模式
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      },
      {
        path: '/about',
        name: 'about',
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
      }
    ]
  })
}


修改vue.config.js，增加服务端渲染相关配置

// vue.config.js

const VueSSRServerPlugin = require("vue-server-renderer/server-plugin");
const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
const nodeExternals = require("webpack-node-externals");
const merge = require("lodash.merge");
const TARGET_NODE = process.env.WEBPACK_TARGET === "node";
const target = TARGET_NODE ? "server" : "client";


module.exports = {
  css: {
    extract: process.env.NODE_ENV === 'production'
  },
  configureWebpack: () => ({
    // 将 entry 指向应用程序的 server / client 文件
    entry: `./src/entry-${target}.js`,
    // 对 bundle renderer 提供 source map 支持
    devtool: 'source-map',
    target: TARGET_NODE ? "node" : "web",
    node: TARGET_NODE ? undefined : false,
    output: {
      libraryTarget: TARGET_NODE ? "commonjs2" : undefined
    },
    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // 外置化应用程序依赖模块。可以使服务器构建速度更快，
    // 并生成较小的 bundle 文件。
    externals: TARGET_NODE
      ? nodeExternals({
          // 不要外置化 webpack 需要处理的依赖模块。
          // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
          // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
          whitelist: [/\.css$/]
        })
      : undefined,
    optimization: {
          splitChunks: undefined
    },
    plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
  }),
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap(options => {
        merge(options, {
          optimizeSSR: false
        });
      });
      
    // fix ssr hot update bug
    if (TARGET_NODE) {
      config.plugins.delete("hmr");
    }
  }
};



修改package.json，增加三个脚本

"build:client": "vue-cli-service build",
"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
"build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",


运行打包命令和启动服务

npm run build:win

node server.js
store的引入和router基本一致，导出createStore方法并在main.js中引入即可

参考文章：

https://juejin.im/post/5b98e5875188255c8320f88a

总结：

对原有框架变动较大，路由，store，请求方式，打包方式均需修改
涉及较多nodejs知识，对不熟悉node.js的同学可能比较吃力

三、nuxt
从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js

让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

原理图：



1、用户打开浏览器，输入网址请求到Node.js

2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据

3、Nuxt.js获取到数据后进行服务端渲染

4、Nuxt.js将html网页响应给浏览器

修改思路


路由直接放在pages文件夹下，相当于做了多入口配置
异步数据的获取通过asyncData方法获得
页面布局放在layouts文件夹下
每个页面都需要的js放在plugins下


区别


相较于预渲染，nuxt可以处理异步数据的获取
相较于ssr改造，框架搭建更加简便，社区资源更加丰富，开发中遇到困难更容易找到解决办法
将seo优化的页面单独抽离成项目，独立部署，和其余项目并行开发，实现解耦

样例效果图，返回的文件已经有了动态数据，更有利于seo爬虫的获取




公共组件的处理（构建自己的包管理仓库，组件打成npm包进行引用）


在公司内部服务器上搭建npm代码仓库（sinopia，pm2）
将一些公共组件如头部，尾部以及基本框架（包含登录，权限逻辑）直接以组件形式打成npm包和脚手架并发布至内部仓库中
在项目中运行npm i xxx安装依赖，避免了大量的重复代码和合并过程中的繁琐操作（只需修改依赖版本号即可）


公共依赖的处理（webpack打lib包）


将所有项目中共同用到的第三方依赖库通过webpack的library打成一个js，放在内部服务器中
之后如果有做cdn加速将大幅提高页面加载速度和打包构建速度