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来启动服务。
坑
每次在服务器上执行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,因此猜需要做出这里的修改。
我们使用pm2来部署nuxt。
pm2 start npm --name nuxt -- start
Nuxt.js部署应用的方式的更多相关文章
- nuxt.js部署vue应用到服务端过程
由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成.现在记录一下部署中的过程. 注:部署时候过 ...
- nuxt.js 部署静态页面[dist]到gh-pages
一. 1.添加package.json { "name": "nuxtweb001", "version": "1.0.0&quo ...
- nuxt.js express模板项目服务器部署
nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进 ...
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- Nuxt.js服务端渲染实践,从开发到部署
感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...
- vue.js 服务端渲染nuxt.js反向代理nginx部署
vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...
- 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API
前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...
- vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器
vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...
- vue-nuxt.js部署到宝塔主机服务器
废话不多说,直接上步骤,如下: 本文章为在 vue环境下使用了nuxt.js 1.搭建环境--由于本人安装的是宝塔主机,因此如下: 由于我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器. ...
随机推荐
- 解决ant Design dva ajax跨越请求 (status=0)
今天实现了antd作为前端展现,python flask作为后端的数据填充,完全两个独立的服务:过程中遇到ajax跨越请求问题,导致status一直等于0,原来是这么写的: xmlhttp.open( ...
- PHP Kohana入门体验教程
打开入口文件kohana目录下的index.php, 左边选中的文件和右边选中的是对应,如果重命名的话两边都要修改. 设置程序默认时区D:\xampp\htdocs\kohana\applicatio ...
- 几个比较很重要的Shader相关教程
1. 论坛上有个兄弟写个的ToonShaderModel,可以参考ShaderModelhttps://github.com/EpicGames/UnrealEngine/pull/1552/file ...
- Python3之弹性力学——应力张量1
题目 已知某点的应力张量为: \[ \left[ \begin{array}{ccc} \sigma_{x} &\tau_{xy} &\tau_{xz}\\ \tau_{yx} &am ...
- Spring MVC中Controller返回值void时报错
Controller如下: 当使用url访问该处理器方法时,报错如下: 26-Jan-2019 21:16:28.105 警告 [http-nio-8080-exec-39] org.springfr ...
- ES6字符串和正则表达式改动
1. ES6字符串变更 (1)includes() 方法,如果在字符串中检测到指定文本返回true,否则返回false (2)startsWith()方法,如果在字符串的起始部分检测到文本,则返回tr ...
- 关于多线程之GCD的一些学习要点
GCD是当前多线程使用最方便的,也是使用比较多的. 学习GCD主要集中在一下几点: 一.队列,同步,异步 1.主队列:dispatch_get_main_queue(); 2.串行队列:dispatc ...
- GMA Round 1 三视图
传送门 三视图 该几何体如图所示,是一个边长为$2\sqrt{3}$的正四面体,高是$h=2\sqrt{2}$,内切球半径是$r=\frac{h}{4}=\frac{\sqrt{2}}{2}$,则体积 ...
- F - 质数检测 V2
https://vjudge.net/contest/218366 Java解 import java.math.BigInteger; import java.util.Scanner; publi ...
- MUI学习01-MUI概括、使用前引入CSS及JS
1.MUI含义 目标:追求性能体验,追求原生UI感觉 重要特征:轻量 优势:MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K 基础:MUI以iOS平台UI为基础,补充部分 ...