nuxt版本:0.10.6

技术栈:nuxt.js, express, pm2

部署环境:windows server

之前用nuxt.js 的express的模板项目在windows下用nginx进行代理访问,其实有点多余,直接用host文件就可以达到相同的效果,仅供娱乐吧,熟悉一下nginx的基本配置也是好的,其实这段时间研究nuxt.js比较多,主要还是想提高客户端访问首页更快一点。

之前使用nuxt.js generate直接生成对应的html静态文件,这个不需要服务器安装什么特殊的环境。

以iis为例,直接把dist文件夹下生成的文件丢到对应的目录就可以了,其他的也是一样拷贝目录文件,这种方式是客户端访问最快的方式,但是生成html静态文件的过程可能有点痛苦,服务器数据有变化的时候要及时地更新对应的静态html文件,比如要跑一些增量更新数据的服务,数据更新这一块的复杂度就上去了。(后续再补充一下nuxt.js 用generate命令生成静态html的范例)

对于后端数据变化比较频繁且及时性要求高的应用来说,需要生成静态html文件很多的情况下,循环生成的方式难以满足要求,以下是一个nuxt.js在服务端世界挂在node.js的环境运行的方式。

生成模板项目

vue init nuxt/express mynuxtexpress

拷贝mynuxtexpress目录下的文件夹到服务器上,例如我拷贝到D:\nuxt目录下

服务器上需要安装node.js,安装好后,cmd打开D:\nuxt目录,更新依赖包

npm install

编译

npm run build

运行

npm run start

浏览器输入http://localhost:3000就可以正常访问了,但是在服务器上如果关掉了cmd命令行窗口,服务就自动停止了

这里介绍一个管理node.js应用进程的管理器pm2,安装也很简单

npm install -g pm2

然后使用pm2启动应用

pm2 start ./build/main.js

启动成功后

基本到这里环境就差不多了,nuxt.js源代码如果不想放在服务器上,可以删除除了.nuxt, build, node_modules文件夹和package.json文件的其他文件和文件夹,但是每次发布build和.nuxt两个文件夹和package.json文件需要进行更新,如有依赖包更新,直接运行更新依赖包命令就可以了

另外默认的服务是host在127.0.0.1本机上,在部分服务器上,如云服务器使用虚拟ip的服务器上,localhost和127.0.0.1都可以访问,但是使用内网的ip无法访问,这也直接导致了服务器外网即使端口开启了,也没有办法访问站点,需要更改server/index.js的host配置,去掉host参数

然后重新编译运行,发布就可以了。

nuxt.js还在发展阶段,很期待即将到来的1.0的版本,其实现在线上的项目已经开始使用了,如果觉得不错,那么试一试吧,用得人多了,发展也就更快了!

nuxt.js express模板项目服务器部署的更多相关文章

  1. nuxt.js express模板项目IIS部署

    继续上一篇的nuxt/express项目部署,还是windows上要把nuxt的服务端渲染项目跑起来,这次的目的是用已经有的域名windows服务器上一个虚拟目录反向代理部署在其他端口nuxt项目. ...

  2. nuxt.js express模板项目虚拟目录部署问题汇总

    声明环境 反向代理:nginx或者iis的ARR 模板项目:nuxt-express 部署环境:windows 经过了一段时间在windows环境部署项目来看,关于虚拟目录的问题汇总如下, 发布场景假 ...

  3. Node.js Express+Mongodb 项目实战

    Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...

  4. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

  5. [转] node.js express的安装与部署,以及pm2下的运行启动。

    node.js 下的express 安装可以参考官方网站的 http://www.expressjs.com.cn/ 这里主要讲一下一些不同的地方,将我们生成的dist文件夹里的文件放在public里 ...

  6. 浅析Python项目服务器部署

    基础理论 关于Web服务器和应用服务器 基本概念: Web服务器主要功能就是存储.处理.传递网页,客户端和服务器之间基于HTTP协议进行通信. 应用服务器主要是处理动态请求,调用相应的对象完成对请求的 ...

  7. 总结在Visual Studio Code创建Node.js+Express+handlebars项目

    一.安装node.js环境. Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 32 位安装包下载地址 : https://nodejs.org/d ...

  8. JAVA项目服务器部署

    1.下载 Java JDK 搜索jdk下载,然后进入JAVA官方网站jdk下载页,选择自己的对应的操作系统,点击下载 https://www.oracle.com/technetwork/java/j ...

  9. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

随机推荐

  1. 数据库的 2个参数 NLS_LENGTH_SEMANTICS 说明,comment 说明

    ############### sample 1: NLS_LENGTH_SEMANTICS 1.数据库字符集选择的是NLS_CHARACTERSET=UTF8,如果NLS_CHARACTERSET= ...

  2. LeetCode 137 Single Number II 数组中除了一个数外,其他的数都出现了三次,找出这个只出现一次的数

    Given an array of integers, every element appears three times except for one, which appears exactly ...

  3. Hadoop 解除 “Name node is in safe mode”(转)

    运行Hadoop程序时,有时候会报以下错误: org.apache.hadoop.dfs.SafeModeException: Cannot delete /user/hadoop/input. Na ...

  4. list map set常用方法之list

    list 常用方法: 默认添加:list.add(e); 指定下标添加(添加后下标后的元素向后挪一位):list.add(index,e); 获得集合内元素个数:list.size(); 返回是否删除 ...

  5. Java实例学习——企业进销存管理系统(3)

    Java实例学习--企业进销存管理系统(3) (本实例为书上实例,我所记录的是我的学习过程) 开始时间:2月12日 完成时间:暂未完成 2月16日-公共类(Item公共类,数据模型公共类,Dao公共类 ...

  6. [Freemarker] 在Java中简单实现对Freemarker的引用

    Demo目录结构 ├─src │ ├─main │ │ ├─java │ │ │ └─demo │ │ │ └─freemarker │ │ │ ├─main │ │ │ │ Test.java │ ...

  7. Web框架的应用

    从今天开始,我们将要学习有关Web框架的一些内容,在学习之前先来学习一下http协议,即基于http是如何通信的. http 概要:http是基于tcp/ip通信协议来传输数据的. 优点: 1.简单快 ...

  8. NetBeans切换其他界面风格

    NetBeans是一款优秀的IDE,但是界面过亮,让我从使用以来就又爱又恨,经过一番摸索,测试出一款扩展软件 个人挺喜欢的分享出来 废话不多说下面教程: 1.安装NetBeans: 2.下载外观包ja ...

  9. Android RecycleView实现混合Item布局

    首先来看看效果吧: 效果预览.png 本实例来自于慕课网的视屏http://www.imooc.com/video/13046,实现步骤可以自己去观看视屏,这里只记录了下实现的代码. 添加依赖: (1 ...

  10. React 官网列子学习

    一个有状态的组件 除了接受输入数据(通过 this.props ),组件还可以保持内部状态数据(通过this.state ).当一个组件的状态数据的变化,展现的标记将被重新调用render() 更新. ...