详解Nuxt.js部署及踩过的坑


Posted in Javascript onAugust 07, 2018

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。

静态应用部署就不说了,主要说说服务端渲染应用部署。

官方推荐部署方式

关于服务端渲染应用部署,官方文档是这么写的:

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

推荐的 package.json 配置如下:

{
 "name": "my-app",
 "dependencies": {
  "nuxt": "latest"
 },
 "scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start"
 }
}

提示: 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

意思是说.nuxt不加入到版本控制,每次服务器从gitlab上拉代码后先执行nuxt build生成.nuxt文件夹,然后再执行nuxt start来启动服务。

踩过的坑

部署方式很简单对不对,看完文档后我就在自己买的服务器上尝试部署一下,然后,BOOM!!!

每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

error Command failed with signal "SIGKILL".

看了一下服务器监控发现build的时候cpu和内存飙升,尤其是内存。。。

好吧,我买的是阿里最低配的ECS,升级配置是最后的选择,在这之前只能另辟蹊径。

另辟蹊径

既然服务器上build不了,那我们就本地build再上传,在.gitignore里把.nuxt去掉、并把dist改为/dist,然后本地执行yarn build,成功之后再上传到github上,检查一下.nuxt是否有上传上去。

之后在服务器上把代码拉下来、安装一下依赖,执行nuxt start就可以了。

这里还有个坑,就是为什么要把.gitignore里的dist改为/dist?

/dist这个文件夹是执行nuxt generate后生成的,用来做静态应用部署的,这部分就跟通常情况下的.nuxt一样是不应该加入到版本控制里的,但由于nuxt build之后,在.nuxt里也会生成一个dist文件夹,我们希望gitignore的只有/dist而不是/.nuxt/dist,因此猜需要做出这里的修改。

nuxt部署

最后,我们使用pm2来部署nuxt。

pm2 start npm --name nuxt -- start

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
vue-dialog的弹出层组件
May 25 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
You might like
改造一台复古桌面收音机
2021/03/02 无线电
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
DOM基础教程之事件类型
2015/01/20 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python操作gmail实例
2015/01/14 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python实现批量文件重命名
2019/10/31 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
python把一个字符串切开的实例方法
2020/09/27 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
道路运输企业安全生产责任书
2014/07/28 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
完整版商业计划书
2014/09/15 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
期末个人总结范文
2015/02/13 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js