Nuxt.js部署应用的方式

更新日期: 2019-01-10阅读: 4.1k标签: nuxt

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

链接: https://fly63.com/article/detial/1815

nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。

nuxt.js中添加统计代码,添加百度统计,或者google的统计

在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。

nuxt.js中全局变量的设定_nuxt如何实现全局初始化功能

在组件和布局中需要使用到相同的数据,改数据需要在nuxt初始化时候获取,而且仅从服务器端获取一次即可。那么该如何实现nux全局初始化功能呢?可以通过vuex来管理全局的一个状态的数据,Nuxt.js 的渲染流程,最先调用的即是 nuxtServerInit 方法。

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

服务端预渲染之Nuxt

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据

nuxt框架中对vuex进行模块化设置

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:Nuxt.js 支持两种使用 store 的方式:普通方式: store/index.js 返回一个 Vuex.Store 实例

Nuxt.js引用谷歌广告代码

最近另一个网站的谷歌联盟申请下来了,记录一下Nuxt.js如何引用谷歌广告的JS代码,当初找了好久。只配置nuxt.config.js文件就可以,下面贴出来。

Webstorm环境使用nuxt.js做开发,@ 和 ~ 别名配置

webstorm 设置@和~别名,有助于代码查看和跳转.在项目下创建一个webpack.config.js,内容如下;设置 IDE:webstorm -> file -> settings -> language & frameworks -> javascript -> webpack

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!