8

vue-ssr结果预览
参考网址: https://www.autmake.com
图片描述

正文

1.背景:
a.有的项目有seo需求且现在mv*框架是大的趋势,便考虑到用vue ssr,然而百度及google里几乎找不到部署相关的文档,都比较碎片,以致自己在部署时比较吃力,在这里分享出来。

2.前期准备:
a.vue2+ssr项目(为不涉及隐私问题,我这里不贴出我的代码,你可以vue官方的demo vue-hackernews为例。
b.支持node的虚拟主机(我的是centos7)
c.pm2管理进程
d.代码传输(如:ForkLift、FileZilla)

3.介绍
我们要在两处维护代码,服务端+cdn处。
clipboard.png

4.实战步骤
a.登录虚拟主机centos(如下图)
图片描述
b.安装node、npm、pm2等。可参考https://www.youtube.com/watch...
c.新建ftp用户及密码重置。可参考http://v.youku.com/v_show/id_...
d.nginx配置。可参考:https://www.youtube.com/watch...
clipboard.png
clipboard.png

e.上传代码
cd /yourProjectPath 执行npm run build,上传dist整个文件夹、server.js、 package.json。
图片描述

f.启动pm2
clipboard.png

5.总结
有vue ssr相关问题欢迎交流
QQ:1543927600~


萌萌的微重口
45 声望4 粉丝