第一步：下載安裝nginx
1、首先我們要去nginx的官網下載windows版本的nginx
2、點擊下載鏈接后會下載得到如下一個nginx的壓縮包：
3、解壓nginx壓縮包，這里需要注意了哈，nginx的解壓路徑不能存在中文，否則nginx服務會無法正常啟動的哈，不信你試試
立即學習“前端免費學習筆記（深入）”；
4、我們雙擊nginx.exe文件啟動服務，細心觀察的小伙伴會發現有一個黑色的彈窗一閃而過就消失了，那這就啟動就完成了。
5、然后我們打開瀏覽器訪問：http://localhost 如果出現如下界面則表示nginx服務成功啟動！
6、如果無法正常訪問的話可以先查看nginx目錄下logs里面的日志文件，
造成無法正常啟動的原因可能有如下兩點：
a、檢查解壓nginx的路徑是否存在中文
b、打開cmd命令行窗口輸入如下命令，查看80端口是否被占用了，nginx默認啟動的端口是80端口
netstat?-ano?|?findstr?0.0.0.0:80
如果輸入上面命令出現如下內容則表示端口被占用
7、如果端口被占用，我們需要修改nginx的默認啟動端口，使用記事本打開conf目錄下的nginx.conf配置文件
在保存后，將server下的端口號80修改為8081，然后重新啟動nginx目錄下的nginx.exe文件
如果還是無法正常啟動，可以查看nginx目錄下的logs目錄里面的錯誤日志，然后自行百度一下
8、下面來簡單介紹一下nginx的幾個常用命令：
注意：需要在nginx目錄下才能執行這些命令：
a、啟動nginx：
E: ginx-1.22.0>start?nginx?或 E: ginx-1.22.0>nginx.exe
b、停止nginx：
E: ginx-1.22.0>nginx.exe?-s?stop?或 E: ginx-1.22.0>nginx.exe?-s?quit
c、重新啟動nginx：
E: ginx-1.22.0>nginx.exe?-s?reload
當修改了配置文件nginx.conf的內容后，需要執行上面這條命令，修改的配置才會生效。
第二步：打包部署vue2項目
1、打包vue項目：
npm?run?build
2、執行上面命令后會把項目打包并輸出到dist目錄下(打包后的文件因個人而異，這里是我公司項目打包后dist目錄下的內容)
3、在nginx目錄下的html目錄下新建一個static目錄，并把剛剛打包后dist目錄下所有文件都復制到static目錄下
4、修改nginx.conf配置文件
擔心圖片你們復制不了，就把server里面添加的配置也粘貼到下面了：
????server?{ ???????#?nginx啟動監聽的端口 ????????listen???????8081; ????????#?可以是localhost和可以是本機ip地址，如果要給公司其他同事的電腦可以訪問，需要?配置為本機的ip地址 ????????server_name??192.168.1.104; ???#?配置頁面中發送的請求代理到后端接口 ???location?/api?{ ???????????#需要代理訪問的后端服務器地址 ????????????proxy_pass?http://10.8.5.42:8084; ???????????#重寫以/api為baseURL的接口地址 ????????????rewrite?"^/api/(.*)$"?/$1?break; ????} ???????location?/?{ ??????????#程序根目錄配置，也就是剛剛打包文件放置的目錄 ????????????root???E:nginx-1.22.0htmlstatic; ????????????index??index.html?index.htm; ???????#?配置把所有匹配不到的路徑重定向到index.html，vue-router的mode是history模式的情況下需要配置，否則會出現刷新頁面404的情況 ???????try_files?$uri?$uri/?/index.html; ???????} ??????? ????}
在這里再詳細說明一下上面添加的這些配置信息：
假設我現在把我windows系統上的nginx服務器的配置文件修改成上面這樣子，然后啟動nginx服務器，當我在瀏覽器中輸入http://192.168.1.104:8081的時候，因為我的nginx服務器配置文件中的listen配置的端口是8081，所以瀏覽器的發送的http://192.168.1.104:8081這個請求會被端口為8081的nginx服務進行處理，然后會被location / {} 匹配，然后nginx就會找配置的root 路徑下的index.html文件，并響應給瀏覽器，這時瀏覽器就可以訪問到我們項目的頁面了。
這樣頁面就可以訪問了，但是頁面中發送的請求怎么進行處理呢？
在vue項目中當我們在頁面中發送請求的時候，我們打開瀏覽器調試工具會看到，我們發送的請求的協議、域名和端口號其實是和訪問頁面的協議、域名和端口號是一樣的，但是真正后端服務器的接口請求地址不是這樣的。
這時候我們就需要使用nginx一個強大的功能了，沒錯就是反向代理，我們可以配置nginx.conf文件，實現把頁面中發送的請求都通過nginx進行反向代理訪問真實服務器（其實這也是一種跨域的解決方案）。
假設后端服務器的地址是http://10.8.5.42:8084，請求后端服務的登錄接口是http://10.8.5.42:8084/accounts/login，然后前端頁面中發送的登錄請求地址是：http://192.168.1.104:8081/api/accounts/login?userName=%E6%B2%88%E5%BF%A0%E6%98%8E&password=123456，這時我們就可以在nginx.conf配置文件中加入如下內容：
看到這里有些伙伴可能就有疑問了，配置文件中的 ：
?rewrite?"^/api/(.*)$"?/$1?break;
具體是什么意思，這里我剛剛開始也不理解????，后來查閱了很多資料，最終就理解通了，
這段配置的作用就是重寫我們的請求地址，因為我這里前端頁面發送的登錄請求接口http://192.168.1.104:8081/api/accounts/login有加了個/api的baseUrl，但是真實的后端服務的登錄接口http://10.8.5.42:8084/accounts/login是沒有這個/api前綴的，所以我在這里需要重寫前端發送的請求地址，把/api給去掉
當我們在nginx.conf配置文件中添加了上面這些配置后，需要執行nginx.exe -s reload命令來載入我們修改的配置，修改了配置文件一定要記得執行這條命令哦！，如果執行這個命令時出現下面的報錯的話，不要慌！
出現這個問題的原因是：你的nginx并未啟動，所以無法加載配置文件，你先執行start nginx命令啟動nginx再執行這條命令即可！
