VUE SSR项目部署

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

npm run build

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

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

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

npm start

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

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

当我们执行npm start时，就要用到cross-env；如图我们设置了NODE_ENV=production；开发过程中执行npm run dev，根本就没用到cross-env。

如果没有安装cross-env，就会报错。解决办法就是在本地安装cross-env：

npm install --save-dev cross-env

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

注意： 如果你的eslint版本设置为4.x以上，会存在兼容问题，所以，一般会将eslint版本设置为3.x。

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

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

npm install

如果你的node_modules文件夹未删除，直接放到了服务器，那么可省略该步骤。

（PS：以上的步骤需要一个大前提，就是服务器上必须全局安装了node，关于linux系统如何全局安装node，自行查看
如果你在执行npm install时报错，首先请排查一下你的服务器是否可以联网，可执行以下命令： ping 'http://baidu.com' ，如果能拿到数据，表示可以联网。
4）接下来就是在服务器启动项目了，执行 npm start

当然此时又报错了，还是cross-env的错，还需要再服务器上全局安装cross-env

npm install -g cross-env

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

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

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

systemctl stop firewalld
service  iptables stop

　　b.然后排查服务器是否对外暴露了3000端口，如果没有请修改配置文件，过程很麻烦，自行搜索。

　　c.3000端口对外暴露成功，如果依然访问不了，还是更换端口吧，直接再服务器里面修改server.js文件的端口号，改成了tomcat对外暴露的端口。

最后大功告成，执行 npm start ，项目启动成功，页面访问正常！

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

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

参考：https://blog.csdn.net/LKFOOD/article/details/88836427

以上是 VUE SSR项目部署 的全部内容， 来源链接： utcz.com/z/380668.html

回到顶部