Hi,我们好，我是抢老婆酸奶的小肥仔。

前段时间，有小伙伴问我，前后端打包怎么布置？当时直接跟他说一遍，往后想想还是写下来，今后能够直接给到需求的小伙伴。

不废话，直接开干！

前后端打包，可分为：前后端分离布置，前后端组成一个包布置。下面咱们这两种方法别离说下：

1、nginx布置，前后端别离布置

1.1、将前端项目进行打包

在ideal中的Terminal，运用指令：npm run build。打包后会形成dist文件夹。

1.2、打包后端代码

在ideal的右侧侧边栏上找到【Gradle】或【maven】，进行后端项目打包。打包后的jar包在target下

1.3、上传前后端包

在linux中创立文件夹，如：server。用于保存前后端的包，上传打包好的前护端文件。

  **例如：在/usr/local/server创立了server文件夹。**

1.4、发动后端jar包

java -jar xxx.jar发动项目后端项目

1.5、装备nginx

找到nginx.conf，装备服务的反向署理。

注：proxy_pass动态署理后端服务地址，如果是本地则直接装备localhost， 署理中称号（api）需求与前端公共的url地址称号保持共同，否则报错

1.6、发动nginx进行拜访

2、前后端组成一个包布置

2.1 将前端进行打包

前端打包能够通过vue ui或许直接指令打包

2.2.1 vue ui打包

在前端项目中运转vue ui进入vuejs页面

挑选【任务】->挑选【build】进入打包页面。

挑选【参数】进行环境，打包途径的挑选

注：输出途径是在后端项目中static目录下，文件名则由前端项目中的module.exports中的publicPath决议。

点击【运转】等待打包进程

2.2.2 指令npm run build打包

在前端项目中运转npm run build指令生成dist包

在后端程序的static中创立文件夹名（与publicPath）共同，然后将前端dist文件夹中的文件拷贝到后端创立的文件夹中。

例如创立的manage文件夹

2.2 后端直接打成jar包

maven或gradle打包

2.3 服务器上运转jar包

2.4 拜访服务

服务器上需求开发端口或许封闭防火墙

上述就是前后端布置的进程，只是最简单的方法。如果是测试环境等，则能够运用jekins等工具来进行布置，这样就不用手动打包。

好了，今天就共享到这，期望对我们有帮助。