nuxtjs服务端部署流程

7,211 阅读3分钟

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