先後端分離以前端部署(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內容啦。