nuxt服务端部署指南

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 方式部署的官网，点击可以查看详情