113-尚硅谷-硅谷通用权限项目-项目部署-前端打包运行

各位同学大家好，下面呢，咱们开始项目的前端打包运行，那咱们打开前端项目，我们用的框架是weueein，然后在里边怎么来做，我们来做个说明，首先我们看第一部分，咱们看一个地方啊，咱们之前呢，曾经在wee con f JS里边加上了这段配置，那这个配置什么意思？给大家再来解释一下，咱之前说过，我这里再重复一下，咱们看这里啊，首先它之前呢，用的是这个叫块，用的是Mo server，就是用这个模拟服务器效果，但是它后面做到这么一个效果，我访问路径，因为咱们启动命令应该是这个命令，各位应该记得n PM run是DV啊，就开发环境它会找到咱们的这个文件，然后用里面这个路径调d va片，所以咱们在文件中我们做了一个判断，当你路径是这个路径，然后把它就是。

重写成这个local house8800，并且解决了跨越，这是咱之前写到的，但是咱们现在呢，要进行前端的打包，而打包的时候呢，它会用到里边的这个文件，大家看啊，叫做Inv.production就是生产环境，然后它的路径叫什么叫prodapi，所以咱们在里边啊，我们需要改个地方，把这里改一下，改成什么prodapi什么意思，因为我们打包之后路径都是这样的，当有这个路径让它跳转到8800中去，这是我们改的这么一个地方。然后改完之后，下面我们进行前端的打包。那怎么打包给大家来演示一下啊？我这里写下。也就是说各位这么理解啊，咱目前项目这里边是不是很多目录，很多文件，然后最终打包的就是一些HL，包括JS文件，包括最终把文件咱通过N这进行部署就可以了。

那怎么打包呢？有个命令给大家写一下NPM，它叫build，然后加个冒号P，在生产环境中进行build构建，现在我们来回车，然后咱们进行前端打包，它打包之后呢，给我们最终会生成一个文件夹，然后里边有十条文件，有JS文件等，那咱们等它打包完成这个过程需要多等一会儿。大家看啊，现在完成了，完成之后我们看这里边啊，多出来文件夹叫做Mo。啊，不是Mo是Dis啊，Dis这个Dis里边我们看啊，有al有个S。然后你看里边有CSS，有是不是有GS，就完成了我们项目的这个打包。然后咱们怎么做呢？咱们把这个Dis里边这些文件直接部署到N中运行就可以了，那下面咱们来运行一下这个前端这个项目，咱们看怎么来做。

首先我这里边呢，因为要用到index，那咱把index在我们的Windows中，咱快速安装一下，当然你可以用lino版本，Lino版本安装可以关注上硅谷N这个视频，咱们这里边重点在Windows中做个演示，那怎么做大家看啊，我这个文件夹中有个N这安装文件，咱把它先进行解压，那我来解一下。然后解下之后呢，我们看里边啊，多出来这么一个文件夹，在文件夹里边，我们进行这个相关的配置，那怎么配置，咱把它打开，然后打开之后我们看啊，这里边有一个文件叫NG.exe咱把它运行就可以了，我们可以直接双击，但是为了看到它的效果，可以通过CMD，然后用它运行，如果说咱要部署项目，因为你看我这个项目里边就是HTF这些文件，所以咱把这些内容直接给它放到就是里边这个HTF目录中就可以了。那下面我们来做一下，首先找到项目路径，找到Dis，然后把里面那种咱直接复制，就是我刚才打包之后内容，就这个内容来到N这A条目中，把里边内容给他先去掉。

然后给它复制就可以了，这样的话就完成了前端项目部署，然后完成之后，下面呢，咱们把N这我们做一个启动，咱们看一下效果啊，首先我们可以先看一下N的这个配置文件。咱们看到啊，它默认端口号用的是不是这个八零，或者说你可以改别的端口号，我这里就有八零了，然后这个之后咱们现在启动N这个，我打开CD，然后咱们输入这个命令，N这点EE直接回车，这里边让它允许现在就可以了，所以现在就完成启动，然后咱们通过八零端口进行访问可以了，因为它里边默认的文件就是in.HTL，那下面我们进行访问。

咱们打开浏览器，在里边输入地址local host，因为咱就是八零，所以我直接回车，然后大家看是不是有这个界面，然后有界面之后，下面我们进行这么一个访问，因为我现在这个后端也完成启动，另外过程中我们有这个right this，目前也是启动状态，那下面我们点登录打开效果我一点大家发现啊，里边是出了一个叫404的问题，那咱看一下什么问题。咱们怎么看呢？我打开F12大家看到啊，比如说现在我再点个登录，我们看到这里边有个路径是不是就是我说那个叫prod API，但是咱发现啊，我刚才前端虽然说改了这个，但是它是不是没有跳转过去啊，所以目前问题依然存在，那怎么解决呢？咱下面就需要在N这里边来做一个配置，那咱们来到N这中，在里边给它加上这么一个配置，我来加一下啊，咱们参考其他的给它改一下，参考这个。

我把这个拿过来。然后再说一下怎么配置啊，格式我先调整一下。首先第一个我们约定啊，当我访问路径中带的是这个路径叫pro API，那让它就跳转到我们当前这个IP和端口号中local host的这个8800，让它跳转到这里边去，所以咱们做这配置，当它包含pro片，就跳转到8800端口中去，这个配置文件我们做了修改。然后修改之后注意啊，这个N这个需要重启一下，咱们重启给大家说明它并不是说啊关这窗口，你关窗口它不会停掉，咱们有这么两种方式，第一种方式，你在N这个里边再打开CMD，然后咱们用N这杠s stop进行停止，或者说呢，你打开任务管理器，找到里面那个进程，找到index给它停止，因为刚才我已经停掉了，然后停止之后我们再给它启动。

这样的话就可以了，然后咱到里边看一下啊，这里边有N这个进程，就是这个两个进程，一个master，一个worker。现在就可以了啊，可以之后最终我们把这个效果，咱们最终再来试一下。来到我的网页中。比如现在我重新访问。重新进行访问，然后咱们在里边。回车。来到这个页面，然后页面之后，现在我点登录，大家看里边效果，我们看里边啊。

登录。好，各位看啊，现在就已经完成了登录，然后登录之后我们在里边呢，比如说我点击用户管理，大家看有用户列表，然后它有角色列表，有菜单列表等等，现在我们这个打包就完成了，然后最后给大家总结变，咱们分成后端打包，还有前端打包，后端把损工程打成炸包，用Java杠炸进行运行，刚才咱们已经运行出来了，然后前端咱们把view me他们已经打包，打包成就是JS文件，S条文件，然后通过index进行部署，最终咱们完成了测试。以上就是我们项目的打包运行部署。