VUE SSR项目部署

记一次小白痛苦的踩坑经历····

VUE项目中个人感觉还是使用vue官方提供的vue-cli脚手架来构建项目的人比较多，相关的文档也总结了很多，而我的项目是采用vue-ssr即服务器端渲染，项目架构来源与尤大在git-hub上的开源项目——vue-hackernews-2.0，想了解的自行在git-hub上搜索
本篇主要来记录一下项目部署的流程：
1.项目在本地开发完成后，需要打包编译，执行以下命令

npm run build

正常执行后会在项目中生成一个dist文件夹，目录结构如下：

dist中会生产很多静态文件，包括js、css、图片资源等，以及vue-ssr-server-bundle.json文件！

2.先在本地部署一下，执行

npm start

正常执行后，可以看到项目已经运行，当然端口号在server.js中自行设置（多为8080端口）

当然不是所有的流程都这么顺利····我第一次启动时，报了一个cross-env的错，如图：

先来介绍一下cross-env：
是什么——就是一个脚本！
干什么——运行跨平台设置and使用环境变量！
可以看一下package.json文件中script中的配置：

当我们执行npm start时，就要用到cross-env；如图我们设置了NODE_ENV=production；至于为什么开发过程中执行npm run dev不会报错也可以看到原因了，因为根本就没用到cross-env

报错的解决办法就是在本地安装cross-env，

npm install --save-dev cross-env

正确安装之后，重新执行npm start 运行正常；

3.本地已经搞定，接下来就是服务器部署了！

此时要注意一个问题，vue ssr的项目打包之后生产的dist文件夹跟使用vue-cli构建的项目不太一样，vue-cli项目打包之后，在dist目录中会生产一个index.html的文件，部署时直接将dist文件夹扔到服务器上即可，然后访问到dist目录中的index.html

但是vue ssr项目打包之后没有类似与index.html的入口文件，部署也不是单纯的把dist目录扔上去；
1）首先可以把工程目录里面的node_modules和src文件夹干掉，以便于压缩和部署到服务器（当然也可以整个项目打包，只是耗费的时间会更多）由于我的服务器时linux系统，所以我将项目压缩成了project.zip文件
2）将打包之后的project.zip直接放到服务器的某个目录下，这个目录没有什么要求，我是放到了tomcat目录下面，执行解压到当前目录

unzip project.zip

3）由于本地已经将node_modules依赖删除，此时需要在服务器重新初始化，执行

npm install

如果你的node_modules文件夹未删除，直接放到了服务器，那么可省略该步骤
（PS：以上的步骤需要一个大前提，就是服务器上必须全局安装了node，关于linux系统如何全局安装node，自行查看
如果你在执行npm install时报错，首先请排查一下你的服务器是否可以联网，可执行以下命令： wget 'http://baidu.com' 出现以下提示，表示可以联网

4）接下来就是在服务器启动项目了，执行 npm start
当然此时又报错了，还是cross-env的错，还需要再服务器上全局安装cross-env

npm install -g cross-env

安装成功之后，再一次启动 npm start ，很好，项目启动成功了

PS：当然不会那么顺利，此时去访问地址时，页面访问失败。。。
排查记录：

首先排查一下服务器是否设置了防火墙，执行以下命令关闭

systemctl stop firewalldservice  iptables stop

然后排查服务器是否对外暴露了8080端口，如果没有请修改配置文件，过程很麻烦，自行搜索
8080端口对外暴露成功，然而依然访问不了，还是更换端口吧，直接再服务器里面修改server.js文件的端口号，我是改成了tomcat对外暴露的端口

最后大功告成，执行 npm start ，项目启动成功，页面访问正常！
补充一点：
当项目开发完成，真正部署到客户服务器端时：
单纯的使用npm start 启动项目是不行的，因为端口会随着shell端口的关闭而关闭；
需要使用nohup npm start & 来启动项目，接着输入 exit 登出；然后再关闭窗口即可
项目启动完成后，地址可以永久访问。
当需要重新部署时，要杀掉当前占用端口的进程，关于杀进程的指令：
1.首先查询占用端口的进程：lsof -i:18081

2.然后杀掉进程： kill -9 11073

VUE SSR项目部署相关推荐

vue框架项目部署到服务器_在浏览器中在线尝试无服务器框架项目！
vue框架项目部署到服务器无服务器框架是无服务器工具的一致领导者. 但是,没有简单的方法可以在线试用无服务器框架项目. 您确实需要一个体面的开发人员设置,并且需要一些工作来设置sls , npm等. ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
Vue前端项目部署在tomcat
第一步配置java环境,下载tomcat后解压,然后将webapps里的默认文件删掉第二步修改vue项目下config/index.js,注意dev和build都要改assetsPublicPa ...
【Vue】如何将一个Vue前端项目部署到Gitee
第一步:在Gitee上新建一个空的项目,记下项目的名称(如:test) 第二步:打包自己的前端项目. 注意事项:手动添加一个vue.config.js配置文件,修改打包之后js.css.图片等文件的引 ...
将Vue+Nodejs项目部署到阿里云服务器
上传文件至云服务器一.打包文件在项目根目录下运行 npm run build 等待命令运行结束后,会发现目录下多了 dist 文件夹,这个文件夹就是我们等下要放到服务器中的. 二.文件传输打开 ...
vue +springboot项目部署（nginx）
后端: 1.使用package 打成jar包 2.将jar包放到搭建好的liunx服务器下(根据自己来规定所放位置) cd /opt/ciss/www/project/ 3.可以自己编辑执行脚本sta ...
vue脚手架项目部署到服务器,vue脚手架项目发布
使用命令:npm run build即可我们在命令行中输入npm run build命令后,vue-cli会自动进行项目发布打包.你在package.json文件的scripts字段中可以看出,你执 ...
PM2 自动化部署项目之（Vue SSR）
背景常规部署项目比较传统的方式通过上传工具直接上传文件替换服务器文件, 也可以通过Xftp 方式来更新/发布指定站点.随着项目复杂度的增强,开发技术等手段增多.一些部署方式显得有点力不从心,且操作过 ...
Nuxt.js（Vue SSR）创建项目到服务器（Nginx+PM2）部署详细流程
一.什么是 SSR ? SSR 就是服务器渲染,什么是服务器渲染?由服务器组装好 DOM 元素,生成 HTML 字符串给到浏览器,也就是在浏览器里面是可以看到整个页面的 DOM 源码的. SS ...

VUE SSR项目部署

VUE SSR项目部署相关推荐

最新文章

热门文章