关于nuxt服务端渲染部署问题

  一直以为 Nuxt SSR 部署打包之后的文件直接拿出去,node_modules 因为已经存在了,如果不新加依赖,就不需 npm install,就可以重启使用的,原来不是的,简单记录一下吧。

1、问题现象:

  Nuxt SSR 部署后一般需要 npm install 安装全部依赖,然后再使用 pm2 进行部署。之前一直仅仅以为 npm install 是安装依赖项的。今天发现原来不仅如此,这里复盘一下。

  之前已经部署 1.1 版本,现在我改了点东西,要部署 1.2 版本,然后 npm run build 打包之后,将所需文件拉到服务器相关目录下,然后 pm2 restart 后,发现 js 文件的版本号怎么都不变。强制清除各种缓存均不变,意识到估计打包文件哪里有问题。

  所以进入对应目录 ls -a 查看所有文件包括隐藏文件,确实有很多文件是更新的今天的,有些没动的文件是之前日期的。

  然后进入 .nuxt 目录,发现基本都是今天的文件,只有一个特殊的目录 dist 目录,还是之前的文件,进入 dist 目录,里面文件也都是之前的文件。

  所以原因几乎就很清楚了。项目真正使用的 dist 里的 js 文件,因为没有进行 npm install 而完全没有重建,还是之前的。所以版本文件一直不会改变为新的。

  这里看 2 张图。

(1)这是 npm run build 打包之后的 .nuxt 目录,我们可以看到并无 dist 目录

(2)这是拿出相关文件,然后 npm install 之后,用于部署的 .nuxt 目录。我们可以看到多了 dist 目录,

  且dist目录里就是 client 和 server,里面分别是所需对应生成的文件等

2、所以相当于说 Nuxt SSR 部署时,我们拿的项目内对应文件,然后需要 npm install 之后才能真正生成用于项目使用的具体各类js组件文件。

  如果不经历 npm install 这一步,那就肯定是无法更新版本的,因为 .nuxt 使用的一直都是之前的 dist。

  如果是直接覆盖 .nuxt 目录,相当于 dist 目录里的文件被删掉了,那么工程项目直接就会报错。

3、还有一种实践思路是:

  比如我把对应文件拉到自己本地或自己服务器上,先npm install之后生成的整个对应文件和 .nuxt ,再把这个整个打包,然后再去别的我们需要部署的地方覆盖原内容。

  这个时候 .nuxt 目录里的 dist 目录是已经生成新的,拉到原部署地方就可以覆盖,变成新的。

  这种方式我觉得理论上也是可行的(因为一般 dist 生成后就与node_modules的依赖项没什么关系了,如spa应用部署只需拿 dist 目录配合 nginx 配置下即可),但是没有实践,等日后有时间的话,我会试试;如果有网友有兴趣实践了的,也请不吝赐教,多谢。

posted @ 2021-06-27 23:06  古兰精  阅读(860)  评论(0编辑  收藏  举报