先后端分离以前端部署(nginx多多端口配置)

若是vue项目最终打包生成了一个dist文件夹，那咱们应该怎么处理这个文件夹呢？有两种思路：

1、非彻底先后端分离项目

　　咱们能够本身在本地开发，使用后端的接口，开发完成后，咱们将打包生成的dist文件夹丢给后端，依赖后端部署，反正都是静态文件，只是最终和后端放一个服务器了。

2、彻底先后端分离项目

　　咱们能够本身在本地开发，使用后端的接口，开发完成后，咱们将打包生成的dist文件夹丢给本身的静态文件服务器。

　　而后问题来了，咱们该怎么搭建本身的静态文件服务器呢？

　　这里咱们只讨论nginx

　　nginx是什么请自行搜索，咱们这里讲述如何配置多个nginx的多端口映射。

步骤以下：

一、首先你得有个nginx的环境吧，这很简单，从官网随便下载一个nginx就行了，解压后以下

　　

二、打开conf文件夹，在里面新建一个conf.dev文件夹，这里存放每一个开发人员本身nginx配置及默认的nginx配置

　　以下，我在conf.dev文件夹下面新建了一个配置文件：demo.conf，这个文件里面注意的有：端口号，域名，域名及端口指向的静态文件根目录，及一些路由映射关系

　　

三、修改主配置文件以下，这里主要是将默认的server配置移除，以及从conf.dev文件夹引入全部配置文件，移除了可不能丢啊，得找个地方放

　　

四、在conf.dev文件夹下新建默认的server文件

　　

　　能够看到，这里是将主配置文件中的server配置拉过来了

五、根目录创建demo文件夹

　　别忘了咱们的设置

　　

　　demo里面随便存放一个index.html

六、重启nginx

七、配置host文件（127.0.0.1为test.demo.com），不会的能够参考个人配置host文件步骤。

　　访问："test.demo.com:7777/"，就能看到你的index.html内容啦。