nuxtjs服务端部署流程

nuxt是一款基于vue的服务端渲染框架，语法和vue基本保持一致，不过生命周期与vue不一样，部署方式也和vue截然不同，vue项目部署是spa的静态页面，只需build出来静态页面，可是nuxt是须要在服务端部署node服务，经过访问node服务，node服务会将项目在服务器渲染完成再将数据返回，这样返回的数据是一个完整的页面，利于seo。

而vue项目返回客户端时不是一个完整的页面而是一个完整的项目，全部的dom元素均是经过js脚本添加到页面中，而爬虫是没法爬取这样的页面的，天然也没法作相关的seo优化。

nuxt的优点就是既保持的先后端分离的优势点，又知足了有seo优化需求的项目。

一 生产环境打包

当咱们要部署nuxt项目的时候须要先经过

npm run build
复制代码

打包生成生产环境部署文件，可是这个打包只会生成一个 .nuxt 文件夹，这个 .nuxt文件夹是在执行

npm run dev
复制代码

也就是开发环境的时候也会生成的一个文件夹，因此打包后的结果就是emmm.... 目录不会有任何变化，不会像vue那样会会生成一个 dist 文件夹。能够经过控制台信息来了解打包信息。

二 复制文件

打包完成后须要将如下四个文件夹复制到服务器相关目录下

.nuxt / static / package.json / nuxt.config.js
复制代码

这四个文件是服务端渲染的必须文件，缺一不可，另外nuxt项目部署的时候是经过node服务来完成对客户端请求的监听，因此部署时候的目录路径没有什么太大的关系，不过有可能须要配合nginx来使用，因此通常都是放在nginx下的相关目录。

而nginx使用与否取决于项目服务器，一般若是一个服务器上既有nuxt项目也有其余项目的时候就须要nginx来作路径转发，由于nuxt项目部署的时候通常状况下只能经过根路径访问，若是须要经过二级路径访问那须要在项目中作特殊配置。

三 安装依赖

将文件复制到服务器后，须要执行

npm install
复制代码

来安装项目依赖，这一步是须要服务器有node环境支持的，而安装node的时候注意须要安装node正式版，不要安装node最新版。

四 启用服务

安装完依赖后就能够经过如下命令来启用服务了

npm  start
复制代码

启用服务后就能够经过相关ip和端口来访问你的项目了。也能够经过PM2来启动后台驻守，这种方式适合手动部署，若是是经过gitlab-ci作自动化部署的话用npm start 就能够了

五 注意点

1.若是启用不了服务，有多是启用ip的问题，nuxt默认启用的是127.0.0.1这个ip在本地没问题，可是在服务器上有可能就不太灵了，能够把ip换成0.0.0.0，这个ip会自动启用服务器真实ip。

2.若是安装不了依赖，有多是node版本问题，能够在服务器上经过node版本管理工具来切换node版本试试。

3.这样部署的服务只能经过根域名来访问，既相似于127.0.0.1 相似于这样的访问路径，若是服务器根路径被占用的话就须要部署在二级路径，相似于 127.0.0.1/web/ 这样的访问方式，若是须要这样访问的话就须要在项目中配置baseurl

www.gxshuke.com 这个是经过nuxt 方式部署的官网，点击能够查看详情