23-服务端渲染SSR-Vue3案例-生产环境原创

这个视频我们继续的来研究V加VIEW3的一个SSR，就是服务端渲染相关的东西。在上一节中我们学习了V如何实现VI3的在开发阶段的一个SSR，下面呢，我们来看一下如何在生产环境中实现一个VIEW3的SSR。其实这个实现也比较简单，我们只需要先把我们当前的代码build到一个client和server文件夹里，然后呢，我们去修改一下server JS就可以了。首先呢，我们打开package的Jason，在这里边我们需要去重新定义几个所谓的NPM脚本，我们来去构造两个新的build，第一个呢就是build client。后边的内容呢，就是weight build，杠杠after DR，我们指定一下输出的目录为Dis目录下的client文件夹，然后我们再去定义一个build server，它的内容是v build，后边呢，加一个杠杠SSR，再去定义一个entry server GS的一个引用，我们来定义它的路径是S2C目录下的。

Entry-server.js然后我们再去定义一下输出的文件夹after d是D目录下的server，这两个build定义好了以后呢，我们再去重新定义一下build的内容，让它去同时启动我们build的client和build server，那我们可以改造一下，执行一下PN PM run build client and and PN PM run build冒号server保存一下，这样的情况下，当我们运行build的时候，它就把我们这两个build命令一并给运行了，我们执行一下PN PM run build。

好，我们看到当前的项目下面有一个Dis目录，在这里边有两个文件夹，一个是client，一个是server，那client里边呢，包含了我们静态的一些资源和入口index atml server端呢，把我们intri server JS打包到我们server里头去了，注意这个server呢已经做了改造了，我们暂时不用看build完了以后的代码，那么接下来呢，我们再去改造一下server.js。由于这里呢，我们可能会要满足在生产环境和开发环境两个环境，所以呢，我们还得需要去定义一个入口的note env，我们根据不同的环境让我们这个代码呢都能运行，上一小节我们已经实现了，在开发环境中如何去实现一个SSR这些代码呢，我们继续保留，下面呢，我们来添加在生产环境中如何去实现一个SSR。

那我们得需要去区分一下环境，所以呢，我们再次打开package.jason在这里边呢，我们去定义一个入口的所谓的环境变量，这里我们就定义一个名字叫serve的一个脚本，那后边呢，我们来去定义具体的内容，我们可以写一个cross-en nv，这个模块主要是满足Windows和Mac能够在不同的环境下进行环境变量的识别。在后边呢，我们去定义一下node_env，它的值我们可以定义成production，也就是生产环境。后边呢，我们去运行我们的命令，执行node server，那其实事实上就是运行了我们根目录下的server JS，那cross inv是一个模块，我们需要安装一下，所以在这里边呢，我们执行PN PM install cross env，杠大D。

安装好了以后呢，我们这个命令就可以运行了，同时呢，我们也可以改一下DV，把它改成叫做node server，也就是我们没有去定义nodee env，默认情况下呢，就是在开发环境下，好这个定义好了以后，我们保存一下，然后再次回到sjs，我们就可以拿到不同的环境了。首先呢，我们先来去改造几个东西，第一个呢，我们先去改造一下这个所谓create server，如果在开发环境里边，我们使用create server来去创建一个weight这样的实例，那如果是在生产环境下面呢，我们只需要去定义一个静态的目录就可以了，所以呢，这里我们得需要去做一个是否是开发环境或生产环境的一个判断，那这个判断该如何实现呢？为了实现这个功能，我们需要在cloud server这个方法里边去传入一个变量，叫做is product。

这个我们可以设置一个默认值，然后我们通过process. env.node_EV来去看它是否等于production，如果是的话，就说明它是在生产环境下面。那么process.env.note en nv其实读取的就是我们开始在运行serve的时候传入的note en nv的值，那如果是生产环境的话，那么is product就为true。那接下来呢，我们来去做一个拆分，首先呢，我们得需要对V做个改造，我们首先在上边呢。来去定义一个V，接下来呢，我们来去判断不同的环境，然后给V来去赋予不同的值，那么这个条件呢，应该就是如果非is product就是在开发环境下面，那我们得需要把weight的赋值这两句话给移上去。

好，那else呢，就是在生产环境下，我们只需要设置一个静态的目录的定义就可以了。note JS的设置静态目录呢，有很多我们可以使用server static，所以呢，我们需要安装一下执行PN PM install server-static。安装好了以后，我们在else的下面呢，就可以去执行一下app.use方法，在这里头我们去require一下，刚刚我们安装好的那个模块，就是serve static，它会定义我们当前的服务的静态目录，后边呢我们可以调用它返回的方法，里边我们可以去解析一个D下载client目录，那这个解析呢，我们多处都使用，所以呢，在上边我们可以定义一个公共的方法。

在这句话的上边，我们去定义一个resolve方法，这个方法呢，我们可以义成一个函数，函数的行参是pass，也就P，然后呢，我们调一下pass.resolve。在resolve方法的里头，我们写个d name，第二个参数呢，就是P，这样的话我们就可以使用这个方法来去加载我们的路径了，我们也可以把我们之前写好的那个past resolve给改造一下，我们把这个pass去掉，我们就不需要这个下划线，下划线第2NAME了，那同理呢，我们上面这个代码也可以做同样的改造，我们继续的编写我们这块内容，我们在这括号里边呢，可以写个resolve里头呢，我们可以定一个路径叫做Dis目录下的client。下面呢，我们定义第二个参数，我们还可把把它折下行，这样的话呢，看的比较清晰一些，在这个resolve方法的后边，我们再去传入第二个参数，比方说我们可以写一个index冒号false表示不让它自动打开我们的索引页面，这个定义好了以后，那么我们区分了生产环境和开发环境，做了不同的事情。

那接下来呢，我们再去看看APP的柚子，这里边的关于模板的加载呢，也得需要做一些相关的配置，我们也要根据不同的生产环境和开发环境来去做一些事情，首先呢，我们得需要去对模板进行重新的定义，所以在这上边呢，我们定义一个变量light template，我们把template放到外侧去，然后我们再去定义一个render。很显然template和render都是不同的值了，那这里的template呢，我们暂时可以把这个light去掉了，那在开发环境里边，我们是通过这种方法来定义我们的template和render的，我们可以把这两句啊切掉，然后再去判断一下环境，如果我们在开发环境下，也就是叹号is product，那我们可以把这三句话粘过来，粘过来以后呢，我们稍微的做一下改造，首先template我们先去定义这样的一个值，然后呢，我们再去把weight transfer mid HTML的值赋给template，最后呢，那个render，因为它是要赋值一个新值，所以呢，我们可以改造一下，把它的写法改成在后边的方法，调用完了以后返回这个render，再赋给这个render函数，这是在开发环境下，那么在生产环境下，我们该怎么去处理呢？我们去直接的写一个template，我们可以把template直接付给一个inex。

的一个解析就可以了，这个解析的话呢，我们也可以在上边单独的去定义一下，比方说在resolve下边，我们可以再去定义一个变量cost，叫做index product，它呢要根据我们是否是product环境，如果是的话呢，那我们通过fs.read file think里边呢，我们去resolve一个路径，那我们这里的路径写什么呢？就是我们当前下的D目录下的client下的index.html，然后我们再去加一个编码utf-八，这样转成我们想要的一个文本的内容。接下来我们再定义开发环境，它就是一个空的字符串。

好，这个index prod定义好了以后呢，我们就把这个内容直接放在刚才我们写的那个地方，也就是可以把temp变成这样的一个内容。然后接下来呢，我们开始准备往下写，在生产环境下，我们仍旧是得需要去定义一下render函数，这个函数的话我们不需要呃，Wait了，我们只需要require去加载这个内容就可以了，因为在我们node JS的生产环境下，我们只需要去加载data目录下的server intry server.js就可以了。然后呢，我们直接拿到它的render方法，直接给我们的render，那么底下这个代码呢，我们暂时可以不用变，因为它可以在生产环境下和开发环境下都可以通用这套代码。好了，关于这个改造呢，我们也完成了，我们去运行一下，看看我们的改造是否真正的起作用了，我们可以执行一下我们package.jason里边的serve，我们在命令行里边输入PN PM run serve，这样的话呢，就完成了一个在生产环境下我们的SSR。

运行的效果。好，我们来看这里头报了个错，说cross env没有安装，应该是我们安装别的模块导致它出问题了，那我们再次安装一下PN PM installro env港大地。好，安装完了以后呢，我们再次执行PN PM serve好了，现在我们的服务启动起来了，光标停留在这个地方，我们打开浏览器输入log house3000刷新一下，好，我们看到呢，并没有任何的效果，好，我们看在server JS的58行出了问题。

我们看一下58行。这里很显然是报错了，那我们检查一下，看看到底是什么错误，好我们看可能的一个错误呢，就是这里我们得需要给它加个括号，这个runner函数呢，得需要括起来我们才能拿到，我们看看是不是这个问题，我们再次重新启动一下这个服务，再次刷新，好，我们看到函数有问题，我们再次回来看一下其他的问题，我们往下翻翻这个错误发现呢，这里面报了关于。路由方面的问题，我们再来看一下package的Jason。这里边。没有路由，应该是我们这个应用没有安装路由，我们执行一下PN PM install view router，刚才我们安装其他模块的时候，可能这两个模块有问题了，那我们重新的安装一下VI rootor，杠打S。

好，接下来呢，我们再次运行一下serve，好，打开浏览器我们刷新一下，诶看到现在呢，没有问题了，好了，我们再次的呢，来进行一下这个演练，我们可以再退出来执行一下PN PM run d，也就是我们package.jason里边的所谓的在开发环境里的效果，我们看到这里呢，已经帮我们预绑定了这个依赖view和view router，很显然这是开发环境的效果，那我们打开页面刷新一下，我们看到呢，没有问题，那接下来呢，我们再去回到PN PM run。Serve，好，再次回到浏览器，我们再次刷新一下，发现这个效果也没有问题，那么它俩有什么区别呢？我们可以点右键查看一下网页的源代码，这个呢，很显然是在生产环境下，我们看到在生产环境下呢，我们这个代码直接的就打印出来了，我们不需要去加载其他的JS，那我们现在再次回来退出来，再次执行PN PM run d，然后我们再次到页面上面关闭它刷新一下，然后我们再次看一下网页源代码，我们看到这里它的加载方式呢，是先加载慢点JS来去做运行，那可见呢，我们在开发环境里边呢，应该脱离了我们生产环境下的一些内容。

以上我们就实现了在V里VE3的在生产环境下面的SSR的环境搭建，这个环境呢，其实上是我们使用最底层的API来去完成的，那其他的框架呢，都是按照我们这个思路来去搭建起来的。有的同学可能使用过view的next这样的一些框架，那你会发现呢，它会帮助我们实现可以帮我们的这个SSR发布成静态的资源，比方说我们执行一下generate，那我们就可以生成静态页面了，那在V这个VIEW3环境下面能不能实现呢？当然是可以的，那下一节我们就来实现如何发布成静态页面，大家加油。