1. 程式人生 > >npm run build 打包後,如何運行在本地查看效果(Nginx服務)

npm run build 打包後,如何運行在本地查看效果(Nginx服務)

get 工具 下載 inf 使用 執行 是我 map lan

這段時間,有點時間,研究了一下vue 打包的很慢的問題。但是當我 npm run build 打包後,在本地查看效果的時候,活生生被我老大鄙視了,因為我打開了XAMPP。他說:你怎麽不用Nginx啊?用這個一堆的路徑問題!!!!!!

然後我就去研究了Nginx 。。。我原諒我老大了。

一.初識nginx

Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件(IMAP/POP3)代理服務器,並在一個BSD-like 協議下發行。其特點是占有內存少,並發能力強,事實上nginx的並發能力確實在同類型的網頁服務器中表現較好,中國大陸使用nginx網站用戶有:百度、京東、新浪、網易、騰訊、淘寶等



二.nginx下載

官方網址:http://nginx.org/en/download.html

技術分享圖片

下載完成以後,得到nginx壓縮包;

技術分享圖片

三、nginx啟動

註意不要直接雙擊nginx.exe,這樣會導致很多問題。

我們使用命令行工具進行nginx的啟動、停止和重啟工作。

使用Win+R快捷鍵打開命令行窗口,並切換到nginx.exe所在的目錄,我們使用start nginx命令來啟動nginx。

我們使用nginx -s stop來快速停止nginx,使用nginx -s quit 完整的停止nginx。

四、運行預覽

技術分享圖片

在執行cnpm run build命令之前,不需要改任何東西,就和cnpm run dev 一樣的單純。

技術分享圖片

難道不需要改配置嗎?不需要!!!!但是我們還是來看看Nginx的conf目錄下的nginx.conf文件

技術分享圖片

怎麽查看效果呢?http://localhost:8089,回車就可以啦!比XAMPP方便好用太多了。什麽配置都不需要!!!

npm run build 打包後,如何運行在本地查看效果(Nginx服務)