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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js通用应用框架-Nuxt.js的上手教程

    Vue.js通用应用框架-Nuxt.js的上手教程

    对于React,Vue构建的单页面应用老说,SEO是一个众所周知的问题.服务端渲染(SSR-server Side Render)是目前看来最好的解决办法.React应用有Next.js,对应Vue的解决方案就是Nuxt.js. 1.简介 官网:https://nuxtjs.org/ GitHub:https://github.com/nuxt/nuxt.js Nuxt.js 是什么? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.

  • 详解Nuxt.js Vue服务端渲染摸索

    本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用

  • Nuxt.js踩坑总结分享

    Nuxt.js踩坑总结分享

    构建问题 1. 如何在 head 里面引入js文件? 背景: 在<head>标签中,以inline的形式引入flexible.js文件.本项目主要为移动端项目,引入flexible.js 实现移动端适配问题. Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置: // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text

  • 详解Vue基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

  • Nuxt.js实战详解

    Nuxt.js实战详解

    一.为什么选择Nuxt.js 多数是基于webpack构建的项目,编译出来的html文件,资源文件都被打包到js中,以下图404页面代码为例.从代码中可以看出,这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization) ,并且 内容到达时间(time-to-content) (或称之为首屏渲染时长)也有很大的优化空间.为了解决以上问题,引入了 Nuxt.js 框架. vue官网对于Nuxt.js也是很推荐的,除此之外,Nuxt.js的开发者积极活跃,版本迭

  • nuxt.js 缓存实践

    nuxt 是基于 vue 的 ssr 解决方案,可以是使用vue语法完成前后端的同构. 然而在与传统纯字符串拼接的 ssr 方案相比,性能就没那么好了, nuxt 需要在服务端生成虚拟 dom ,然后再序列化出HTML字符串,我们常说 nodejs 的高性能指的是异步IO操作频繁的场景而非CPU操作密集的场景,毕竟 nodejs 是运行在单线程下的,在涉及到高并发的场景下,性能就会有所下降,可以考虑采用合理的缓存策略 nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存

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

    Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方推荐部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成: nuxt build nuxt start 推荐的 package.json 配置如下: { "name": "my-app&quo

  • 详解Nuxt.js 实战集锦

    读本文前,请先熟读nuxt官方文档,并且具备一定的vue.js相关开发经验 中文文档 英文文档 vue SSR指南 一.CSR和SSR对比 在SPA之前的时代,我们传统的Web架构大都是SSR,如:Wordpress(PHP).JSP技术.JavaWeb等这些程序都是传统典型的SSR架构,即:服务端取出数据和模板组合生成 html输出给前端,前端发生请求时,重新向服务端请求html资源. SPA(CSR): SPA应用,到了Vue.React,单页面应用优秀的用户体验,逐渐成为了主流,页面整体是

  • 详解Nuxt.js中使用Element-UI填坑

    Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack.nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目.Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统.后台管理系统等基于Vue的系统. 由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element

  • 详解wepy开发小程序踩过的坑(小结)

    H5内嵌富文本编辑器 微信小程序没有支持的原生富文本组件,可以通过web-view内嵌H5实现富文本编辑功能,起初使用的是wangEditor富文本编辑器,因为项目使用的是七牛云存储,wangEditor在pc端上传是没有问题的,但在在移动端调用不了本地图片,于是换了个功能强大二次开发较强的富文本编辑器vue-quill-editor,更多请参考官方文档, 基于此对上传图片进行二次开发. 七牛云 + elementUi + vue-quill-editor上传图片和富文本 $ npm insta

  • 详解Nuxt内导航栏的两种实现方式

    方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为index,index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面 一级路由是根路由 二级路由是index,user,默认进入index路由 下面是router页面自动生成的路由 { path: "/", component: _93624e48, children: [

  • 详解Howler.js Web音频播放终极解决方案

    前言 相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作.... 偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美 Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目,Howler.js 基于 Google 的 Web Audio API,能够帮

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解tomcat热部署和热加载的方法

    详解tomcat热部署和热加载的方法 我在项目开发过程中,经常要改动Java/JSP 文件,但是又不想从新启动服务器(服务器从新启动花时间),想直接获得(debug)结果.有两种方式热部署 和热加载: 1.热加载:在server.xml -> context 属性中 设置 reloadable="true" <Context docBase="xxx" path="/xxx" reloadable="true"/&

  • 详解node.js中的npm和webpack配置方法

    详解node.js中的npm和webpack配置方法

    概述 Node.js用c++语言编写而成的,是一个基于chrome V8引擎的javascript运行环境,让javaScript的运行脱离浏览器服务端,可以使用javaScript语言书写服务器端代码 1.使用node来实现一个http服务器 下面创建了一个端口为8787的服务器.他与php,java等不同,像php本地还要基于阿帕奇服务器,node.js能用代码快速搭建一个服务器. // 引入http模块 var http = require("http"); // 调用http的

随机推荐