Nuxt部署的坑，你有没有踩坑

Nuxt是一个基于vue.js的服务端渲染框架。主要应用场景是用vue开发并且有seo需求的网站。因为它可以从服务端读取数据渲染。

Nuxt提供了两种部署方式：服务器端渲染应用部署和静态部署。

两种方法都很简单，官方文档写的很清楚。

服务器端渲染应用部署执行两个命令就可以了：

nuxt build
nuxt start

这两个命令在安装脚手架的时候，就已经写在package.json文件里。我们在命令行里执行：

npm run build
npm run start

就可以了。

线上环境的话，可以配置线上的域名和端口，在package.json文件里写就可以，写法如下：

"config":{
    "nuxt":{
        	"host":"xxx.com", //线上域名
        	"port":"80" //线上端口
    }
}

在nuxt.config.js文件里配置也行，写法如下：

server: {
     port: 3001, // 线上端口
     host: 'xxx.com', // 线上域名
}

然后在服务器上用pm2开启一个守护进程就可以了。命令如下：

pm2 start npm --name  "mynuxt" -- run start  //mynuxt是package里的项目名称。

服务器端部署不用部署nginx。

其实，每次在执行build的时候，会在.nuxt文件里生成一个dist目录。网上一些介绍服务端部署的时候，大部分是让把下面四个文件传到服务器上：

package.json
nuxt.config.js
static
.nuxt

然后执行npm install安装依赖。也是没问题的。

因为我用的git管理代码的，所以，我直接把所有代码传到服务器了。

再说说静态部署。

静态部署更简单，执行 npm run generate就会生成一个dist目录。dist目录里就是一些静态文件，你可以把这个dist目录放到服务器上，配置一个nginx站点指向你这个dist目录就可以访问了。

当然，如果你用git或者svn管理代码的话，你也可以把代码都传到服务器上，在服务器上执行npm run generate生成dist目录也可以。

静态部署我觉得有点坑。

坑的点主要集中在asyncData里的数据。

坑点一：

我们用Nuxt主要是因为可以在asyncData里通过服务端获取数据。但是，如果静态部署的话，上下文对象context里的req和res是获取不到的。如果我们需要获取req或者res里的数据就没办法搞了。比如，我们需要用到用户的登录状态cookie，我们就没办法获取。asyncData里面又没办法读到浏览器信息。

坑点二：

在·asyncData·里获取到的接口数据，是不更新的。

比如，我读取了一个列表数据，我静态打包了。我在后台又添加了一条数据，这个时候，我前端页面上的数据是没有变化的。如果想让页面上的数据更新，只能再打包发布。

不更新可能是因为打包生成静态页的时候，程序把数据读取到页面，生成相应的静态页。浏览静态页的时候，因为没有服务端支持了，asyncData里的数据（也就是同步的数据）就没办法获取到了，数据只能通过异步获取。

如果想刷新页面，数据更新怎么办？

我现在是在created里面又调取了一遍数据以覆盖已有的数据。

页面上的数据更新频繁的话，建议用服务端部署；
页面上的数据不经常更新的话，可以考虑静态部署；

Nuxt还在持续摸索，上面有可能写的不对的地方，欢迎朋友们指正！更多其他关于前端知识的文章，大家可以搜索微信公众号：“刘小妞的栖息地”或者是识别下图的二维码查看，感谢大家的支持。