最近这段时间在用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里的数据。
坑点一：
我们用N uxt主要是因为可以在asyncData里通过服务端获取数据。但是，如果静态部署的话，上下文对象context里的req和res是获取不到的。 如果我们需要获取req或者res里的数据就没办法搞了。比如，我们需要用到用户的登录状态cookie，我们就没办法获取。asyncData里面又没办法读到浏览器信息。
坑点二：
在asyncData里获取到的接口数据，是不更新的。
比如，我读取了一个列表数据，我静态打包了。我在后台又添加了一条数据，这个时候，我前端页面上的数据是没有变化的。 如果想让页面上的数据更新，只能再打包发布。
不更新可能是因为打包生成静态页的时候，程序把数据读取到页面，生成相应的静态页。浏览静态页的时候，因为没有服务端支持了，asyncData里的数据（也就是 同步的数据）就没办法获取到了，数据只能通过异步获取。
如果想刷新页面，数据更新怎么办？
我现在是在created里面又调取了一遍数据以覆盖已有的数据。
页面上的数据更新频繁的话，建议用服务端部署；
页面上的数据不经常更新的话，可以考虑静态部署；
Nuxt还在持续摸索，上面有可能写的不对的地方，欢迎朋友们指正！
长按下方二维码，关注刘小妞的栖息地 👇👇👇
往期文章：
