• 关于nuxt项目部署和更新


          最近在做nuxt项目的开发,毫无疑问的遇到了部署的问题,对于nuxt小白的我以为和客户端项目那样打包编译上传前端服务器就完事了,然而并不是这样的。从部署到更新部署将流程和遇到的问题的解决方法记录一下:

          1.对nuxt项目进行打包编译,输入指令npm run build,执行完会出现.nuxt文件夹,再执行npm run start,在浏览器输入localhost://3012(我的端口号是3012,这端口号输入自己项目的端口号),如果能够正常访问说明打包没问题。

          2.将.nuxt,static,nuxt.config.js,package.json这四个文件夹复制上传到前端服务器,我用的是winSCP,在winSCP有个终端命令,在部署的文件夹下打开终端命令窗口,输入npm install点击执行,远端会进行依赖安装,安装完成后文件夹会出现node_modules文件夹,此时准备工作已完成,在终端命令窗口输入npm run start点击执行,Nginx配置好后通过域名就能正常将项目跑起来。此时可以不走红色背景那个命令,采用pm2守护进程,即输入pm2 start npm --name "xxxxxx" -- run start(xxxxxx是服务器当前项目文件夹的名称),这样就能让项目持续运行,这里不多描述,大家可以自行查一下pm2,执行完可以看到自己的项目是处于‘online’状态,说明是在线的,Nginx配置好后通过域名就能正常将项目跑起来。

          

           

           

           

           

          3.当项目之前部署是成功的,在进行版本优化迭代时,像客户端项目那样打包编译直接上传刷新页面就更新成功了。而这个做法用在nuxt更新部署上时你会发现是行不通滴,npm run start会给你报错,提示端口始终存在。又或者部署后页面无法打开提示Server error等等。在反复折腾后发现应该这样做:

                  由于我是自己摸索的,从而pm2列表有多个进程是重复的,包括端口占用等。先进行以下处理:

                (1)终端窗口输入pm2 delete xx(xx是守护列表里项目的id)可以清理多余的进程守护。

                (2)终端窗口输入netstat -nultp可以查询端口使用情况,netstat  -anp  | grep xxxx(xxxx是端口号)可以查找占用端口的进程,kill -9 xxxxx(xxxxx是进程id)可以杀死占用进程。

                (3)将多余进程清理,端口占用清理后输入npm run start执行,此时你会看到终端不再提示你的端口始终存在。

                 此时进行下列操作:

                (1)终端窗口输入pm2 stop xx(xx是守护列表里项目的id),将pm2进程守护停止(没有停止守护时重复执行第2步操作,你会发现pm2的list会有很多守护项)。

                (2)将重新打包的四个文件夹上传(若node_modules被删除或者有新的依赖时,需要在终端窗口输入npm install)。

                (3)在终端窗口输入pm2 restart xx(xx是守护列表里项目的id),刷新页面就能看到页面正常运行了。

          

            以上就是nuxt部署的步骤以及我遇到问题时的解决办法,亲测有效,希望能帮到大家。

     

            如需转载请注明出处:https://www.cnblogs.com/zishang91/p/14918515.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!

  • 相关阅读:
    [转]解读Unity中的CG编写Shader系列4——unity中的圆角矩形shader
    [转]解读Unity中的CG编写Shader系列5——理论知识
    [转]解读Unity中的CG编写Shader系列3——表面剔除与剪裁模式
    [转]解读Unity中的CG编写Shader系列二
    [转]解读Unity中的CG编写Shader系列1——初识CG
    使用 GPU 加速计算
    [转] Draw Call未被批处理?告诉你在Unity 5.6中如何查找原因 [复制链接]
    程序员,如何从平庸走向理想?
    SDUT-2122_数据结构实验之链表七:单链表中重复元素的删除
    SDUT-2121_数据结构实验之链表六:有序链表的建立
  • 原文地址:https://www.cnblogs.com/zishang91/p/14918515.html
Copyright © 2020-2023  润新知