24-服务端渲染SSR-Vue3案例-生成静态页面原创

这个视频我们继续的来研究SSR，在上两个视频里边，我们通过在V里边将VIVO3的项目完成了一个开发环境和生产环境的SSR的搭建。现在呢，我们再来完成通过SSR来生成一些静态的资源，也就是说现在呢，我们不光能够在生产环境和开发环境里边去运行我们SSR的页面，我们也可以将它生成一个静态的目录，这样的话我们就可以把它目录放在任何的地方来运行了。我们现在在我们当前的这个项目目录下面，来去打开package的Jason，在这里边呢，我们来去编写一个新的NPM脚本，这个名字呢，我们可以叫做generate，也就是生成的意思，在这后边我们准备去生成一个静态的资源，我们可以写入weight build，后边呢加一个杠杠SSR manifest这样的一个参数，然后我们再去定义一下after there。

我们把它放在一个Dis目录下的static这个文件夹下面，然后我们再去and and执行一下PN PM run build，后边呢，我们去运行一下server，然后我们再通过node运行一下本地的一个pre re.gs那很显然这个脚本里边我们得需要去构建一个pre reer这样的一个JS文件。然后我们再去运行它，生成我们的静态资源，我们先保存一下，这个文件呢，应该是跟我们的server JS同目录的一个文件，我们在项目根目录下面创建一个新的文件，叫做pre render，叫做预渲染点JS，这里边呢，我们就做一些预渲染的工作，也就是说我们生成静态资源得需要重新的渲染。那我们来看一下这个预渲染的GS都包含哪些内容，首先呢，我们去定义一个FS，来去引入我们FS这个模块，然后呢，我们再去引入pass这个模块，我们也是require一下JS里边的这个pass模块，接下来呢，我们来去定义一下resolve，或者我们改个名字就叫做to。

APP salute，我们生成一个静态的一个绝对路径的目录，然后我们去编写一个参数，参数的后边呢，我们要写一个返回值，叫做pass.resolve后边呢就是dear name，然后我们把这个传入的路径给写进去，这样的话呢，我们就产生一个物理的绝对路径，这个跟我们上一小节编写的resolve是一个意思，然后呢，我们再去定义一个变量，叫做manifest，这个变量它的内容呢，应该是去require，我们去加载一下目录下的static，当然这个我们得需要先生成出来，然后呢，我们再去读取一下它里边的SSR manifest。

这个我们看一下package的Jason，这个generate呢，有几个命令联合起来。这个generate命令，这个generate呢是有几个命令联合起来的，一个是我们先build，然后加一个SSR manifest，这样的话呢，会在this static里面产生一个manifest文件，那这个文件呢，一会我们来看一下，这个文件呢，等一会儿我们打完包以后再看一下，那么最后的这个node pre reer，这个GS运行要基于我们前面生成的这个manifest，所以呢，在这个里边我们已经能够访问我们这个SSR-manifest这个所。我们已经能够访问SSR-manifest点这个文件了。

那接下来呢，我们再去定义一个模板template，这个模板的话呢，我们使用fs.read file think，我们去读取一个文件，我们首先呢，先去构造一个绝对路径to absolute里边呢，我们去读取一下目录下的static下的index.attml也就是我们读取一下这个入口文件，然后后边呢，我们可以加个参数UTF-八。好，这个常量定义完了以后呢，我们再去定义一下，这个定义就是我们去解构出我们的render函数，那我们得需要去require一下，就是我们当前目录的this下面的server下面的entry server.gs好了，那我们可以从这个模块里面结构出一个render函数，这个我们前边呢已经实现了，接下来我们再去定义一个变量，Cost routes to pre。

Render，顾名思义就是通过pre render将我们的路由来做个转化，但路由里边是有路径，还有对应的组件的，然后我们通过FS，然后呢，点我们去read file thank，我们通过同步的去读取一个文件，这个文件呢是在哪个目录下，是在S2C下的，叫做pages，也就是我们的路由的。对应的组件，我们再通过map函数来将我们这个数组做个映射，这个数组返回的每个元素就是我们的文件的整个名字，然后在里头呢，我们做一些转换，首先呢，我们定一个内，我们通过file.replace。我们来去做一个转化，做个什么样的替换呢？这里边儿呢，我们将这个file的字符串后面的点view这个扩展名给去掉，只取这个文件名，所以呢，后面我们可以写一个正则。

斜线，斜线里边呢，我可以写个杠点，然后view Dollar，然后我们要把这个点view的这个扩展名替换成一个空，也就是说我们只取到文件名，然后我们再执行一下to lower case。好，经过这个转化以后呢，我们就可以拿到这个文件的名字了，拿到以后呢，我们再去返回一个name是否等于等于home这个字符串，如果相等的话呢，那我们就可以返回一个斜线了，如果不等的话呢，那我们就给它返回我们的一个模板字符串，比方说我们这里边可以写个斜线Dollar，我们要写个变量就是name。好了，那这个返回回来以后呢，接下来我们就可以去完成一个循环了，我们可以在这下面呢写个for循环，循环的里头我们去定义一个cost URL off，一个roots to。

Preer，也就是我们去通过fall off来循环我们这个数组，我们在这个循环题里边来定义一个变量PHHTML，然后我们通过a wait等待一个promise，这个promise呢，就是render函数的执行结果，我们给它传入一个URL，再传入一个manifest，这个manifest呢，我们在前面已经定义好了，大家可能注意了，这里我们有个a weight，它没有所在的函数，我们怎么去定义a think呢？所以我们得需要把这句话先剪切下来，然后呢，我们去构造一个函数。我们构造一个箭头函数，那我们让这个函数呢立即调用，那我们得需要在这前面呢加一个分号，然后防止我们压缩的时候出问题，然后呢，我们在这函数前面加个think，然后这样的话呢，我们这里的wait就可以使用了，那定义好了这个PHHTL以后呢，我们再去定义一个HTML，那就是我们使用template。

然后后边呢，使用replace，我们去做一个字符串替换，将我们模板里边的那个字符串，我们可以打开indextml，将这句注释copy下来放到这儿，然后我们将它给做个一个替换，替成PHHTML，将我们渲染好的路由的这个组件给装载进来，放到我们HTML里，好，接下来呢，我们再去定义一个常量，叫做file pass，它应该等于我们先定义一个字符串模板list目录下的static。后边呢，我们可以使用一个变量，看看URL是否等于等于斜线，如果是的话呢，那我们就使用一个斜线index来代替，否则呢，我们就使用URL了，那这个模板字符串里头应该是还要加一个点HTML，相当于我们要去生成一个类似于HTML的这样一个文件，最终的。

目标我们要通过fs.right file think，大家应该发现了，我们得需要去写一个文件，也就是生成这样的静态的文件了，那我们通过two absolute里边写一个写入文件的路径，也就是file pass，写入文件的内容呢，就是HTML，这样的话呢，我们就完成了一个静态资源的一个生成，那for循环完了以后，我们还需要把之前生成的那个manifest的文件给删除掉，我们执行一下fs.i link thinkk，啊，那个think就是删除一个文件，这个文件的路径呢，就是to absolute里边呢，应该是目录下的static下的SSR-may neest。

第二，GSN，好了，相当于我们读取或者是用完了这个JS文件以后，我们需要把它给删除掉，当然不删除也没有关系，好了这样的话呢，我的preer就写好了，然后接下来呢，我们再来看最后我们要去修改的一个文件，就是serve GS在这里边呢，我们得需要去读取一个manifest，那在这下面呢，我们去定义一个常量名字叫做manifest。它等于我们先判断一下当前是否是生产环境，如果是生产环境的话呢，我们就require一下data目录下的client下的SSR-manifest.jason那你可能会问，那你刚才不是删除掉了吗？怎么还能够require？就是因为我们的删除的这个操作应该是在刚才那操作的后边，所以呢，我们是可以读取到的。那如果是在开发环境里边呢，这就是一个空对象了。manifest拿到以后呢，我们需要把manifest传到我们刚才的那个异步run函数里。

那我们找到那个runner函数。在这儿我们把刚才的manifest给传递进来，这样的话呢，我们生成静态页面的所有的动作就完成了，那我们可以一步一步的去完成它，首先呢，我们可以去执行一下。前两步我们把后面这步呢先删除掉，然后我们看能不能执行，我们按一下CTRL加波浪线互换出我们这个文件夹，进入到advance的SSR view3这个目录下面，然后我们执行PN PM run generate。这个命令执行完了以后呢，会执行这两个命令，我们现在打开Dis目录，然后我们看到这里面有个static，这里头有一个SSR manifest Jason，那么这个Json文件呢，我们看到就是一个文件的映射，前边呢是一个GS的路径，也就是我们的K，后边呢对应着这个S的实体的文件，这些manifest的配置呢会被替换，那现在呢，我们生成了静态资源了吗？很显然我们看到没有生成我们路由的文件，因为我们并没有执行我们的pre JS，所以呢，回到package Jason，然后呢，我们再去把刚才的那句话给恢复回来，然后保存一下，然后我们再次去执行一下PN PM run generator回车。

好，这里头我们看到报了个错，我们看应该是这个read file think出了问题，我们呢，来打开一下pre render的GS，好，我发现这啊，这不是读取我们文件的S，而是读取我们的目录的S，所以这里边呢，应该是read DR think保存一下，然后呢，我们再次执行一下，执行一下PN PM run rate。好，我发现呢，还有一个错误这儿啊，这个单词拼错了，应该是lower case，好，接下来我们再去运行一下。

好，现在貌似我们的静态资源就生成出来了，我们现在打开这个Dis目录下的static，我们看到这里有above HTML和index HTML，并且这些资源也生成出来了，那我们怎么去用static这个目录呢？其实上它就是一个普通的静态资源了，我们可以把这个目录拷到任何的地方，直接运行indextl就可以了。我们来去做个实验，我们可以通过PNPM来去在全局里边安装一个叫做HTTP-server-G我们也可以使用NPX，直接的去使用它，直接执行NPXHTTP-server，然后我们去运行一下当前目录下的目录下的static。好，我们看到它已经在8081上运行起来了，我们的浏览器上面打开它，然后我们去点击一下，诶发现呢，这个已经没有问题了，那这个运行跟我们之前的那个server运行有什么区别，那很显然这里边都是本地的一个静态资源了，你可以把它部署到任何的服务器上去。好了，关于V结合VIEW3的SSR我们就全部讲完了，你使用的任何的框架，它的底层都是基于这些API，或者基于我们现在这个案例来去实现的这个所谓的服务端去。

通过这个案例，希望大家能够得到一些启发，然后就可以顺利的去使用别人写好的框架，或者是自己搭建一个SSR这个服务了。这里有个问题，就是关于V的SSR呢，还是在试验阶段，大家如果是想在自己的生产环境里使用，还是稍微等待一下好。关于VI3的SSR我们就讲到这里，大家加油。