Nuxt部署的坑，你有没有踩坑_宝塔部署nuxt3_代码哒搬运工的博客-程序员秘密
技术标签： html5 前端 html javascript
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还在持续摸索，上面有可能写的不对的地方，欢迎朋友们指正！更多其他关于前端知识的文章，大家可以搜索微信公众号：“刘小妞的栖息地”或者是识别下图的二维码查看，感谢大家的支持。
智能推荐
java 限制https_本地Java程序访问HTTPs遇到的问题_weixin_39860919的博客-程序员秘密
本地测试程序需要访问HTTPs,String urlPath = "https://192.168.10.88/xxx/login?username=" + userName + "&password=" +password;URL url= newURL(urlPath);connection=(HttpURLConnection)url.openConnection();connect...
BZOJ2238 mst（最小生成树+树链剖分）_bzoj树链剖分好题_Michael_GLF的博客-程序员秘密
传送门【题目分析】树剖好题。首先按题意做出最小生成树，如果做不出，那么所有询问都是"Not connected"。同样，如果删的是非生成树上的边，对答案不会造成影响，直接输出最小生成树的权值即可。那么考虑生成树上的边被删的情况：很明显，对于一个环上的所有边，如果删掉一条，剩下的点仍然会保持联通。所以这个环上的所有边都是可以互相替代的。按照这个思路，我们将所有非生成树...
Android基础（五）----Toast的简单使用_andanwubian的博客-程序员秘密
上一篇中讲述了如何建立一个活动（从空白开始），该篇简单介绍Toast的使用Toast是Android系统中的一种较好的提醒方式，可以将较短小的信息通知给用户，并在一段时间后消失，不占用屏幕空间。Toast使用方法：使用makeText()（该方法有三个参数）创建一个Toast对象，然后调用show()将Toast显示出来就可以了。Toast.makeText(Context co...
SpringCloud服务间调用_spring cloud测试类的路径和application包路径不一致需要怎么办_漫玥刚花的博客-程序员秘密
SpringCloud服务间的调用有两种方式：RestTemplate和FeignClient。不管是什么方式，他都是通过REST接口调用服务的http接口，参数和结果默认都是通过jackson序列化和反序列化。因为Spring MVC的RestController定义的接口，返回的数据都是通过Jackson序列化成JSON数据。一、RestTemplate使用这种方式，只需要定义一个R...
iqooneo5隐藏应用方法分享(2021)_“neo5的隐藏功能怎么设置”_爱学习的小兔子的博客-程序员秘密
在我们的手机中难免会有一些隐私应用不想被别人看到。这时我们可以对该软件进行应用隐藏。那具体该怎么操作呢？不要着急换换早就为大家准备好了iqooneo5应用隐藏的详细方法。快来接着往下看看吧！iqooneo5隐藏应用方法分享1、打开手机设置。点击【指纹、面部与密码】。2、点击【隐私与应用加密】。设置好隐私密码。3、点击【应用隐藏】。4、开启需要隐藏应用的开关即可。...
窗口的位置：GetWindowRect与MoveWindow等_vb中的movewindow有什么用_超频化石鱼的博客-程序员秘密
父对话框的整个窗口区=父对话框客户区+父对话框标题栏区1. GetWindowRect()获取的是以屏幕左上角为(0,0)点的窗口区域，是屏幕坐标系。① 如果对父对话框调用GetWindowRect()，那么获取的矩形为父窗口在屏幕中的区域，其中矩形区含标题栏以及外边框。② 如果对控件调用GetWindowRect()，那么获取的矩形是控件在屏幕中的区域。注意在对话框的OnInitDialog...
随便推点
C++迭代器：const_iterator和const形式的iterator有什么区别？_涛歌依旧的博客-程序员秘密
从C语言走过来的猿们， 对指针已经很熟悉了， 也很清楚指向常量的指针和常指针的区别。 在本文中， 我们来学习一下C++中的迭代器， 顺便类比指针来学习一下指向常量的迭代器和常迭代器的区别。 其实， 迭代器很简单， 你就把它理解为一种类似指针的东西就行了， 毕竟指针的概率是广义的， 你的手指， 大拇指， 小拇指， 那就是个指针。 比如， 完全可以把vector::iterator理解
C语言中time函数_time( <1 ); time = localtime(<1);_Resines的博客-程序员秘密
<br />C语言中time函数<br />void main()<br />{ <br />struct tm *newtime;<br />char tmpbuf[128];<br /> time_t lt1;<br /> time(<1);<br />newtime = localtime(<1) ;<br />strftime(tmpbuf,128," year =%Y; month = %m;day =%d; /n",newtime);<br />printf(tmpbuf);<br /
解读TCP/UDP数据包（四）：TCP数据包实例解析_tcp数据包解析_fzzmouse的博客-程序员秘密
1、一个完整的TCP数据包 11:43:26.893811 IP 10.135.1.108.39936 > 10.135.38.95.8090: P 1:247(246) ack 1 win 12 <nop,nop,timestamp 3216248128 3584896032> 0x0000: 4500 012a cfdf 4000 3d06 3016 0a87
STL函数对象及函数对象适配器【转】_happyprince的博客-程序员秘密
一 函数对象Functor STL中提供了一元和二元函数的两种Functor,通过unary_function和binary_function提供了这两种不同参数数量的Functor的基本结构,在这两个类型中,分别内嵌定义一元和二元函数操作在模版推演的时候需要用到的typedef. //一元函数的定义为template&lt;class _A, class _R&gt;struc...
word 2016利用表格编排公式及编号_word表格公式编号_suxiaosususu的博客-程序员秘密
前言 利用word写文章时，不免需要用使用公式。插入公式和上节介绍的插入图表一样，也需要对其进行编号和交叉引用，但是插入公式也插入图表也不太一样，在这里介绍利用表格来插入公式并对其进行排版和编号，以做备忘。 操作过程 1、插入一个“一行三列”的表格，如下图； 2、全选表格，右击选择“表格属性”，目的是消除表格内字符和表格边界的距离，如下图；...
spring cloud集成 NACOS配置中心实现动态配置_nacos-config pom_抹香鲸之海的博客-程序员秘密
一、Nacos配置中心介绍Nacos提供了两种服务，一种是用于服务注册、发现的Naming Service，一种是用于配置中心、动态配置的Config Service，而他们底层均由core模块来支持。外层提供OpenAPI供客户端使用，并提供了User Console、Admin Console方便用户使用 。Nacos 并不是通过推的方式将服务端最新的配置信息发送给客户端的，而是客户端维护了一个长轮询的任务，定时去拉取发生变更的配置信息，然后将最新的数据推送给 Listener 的持有者。配置主要有