nginx部署vue項目

在window上已經安裝好了nginx的基礎上，來部署VUe項目

沒安裝好nginx，參考這邊：https://www.cnblogs.com/yingyigongzi/p/10867805.html

打包vue項目

npm run build

 通過上面命令后打包好的靜態資源將輸出到dist目錄中。如圖所示

將打包好的dist文件夾復制到nginx安裝目錄下的html文件夾內

 

修改nginx配置文件，配置文件為conf下的nginx.conf,修改nginx.conf中的server配置片段

圖中的localhost換成IP，例如10.8.20.300，即可在內網其他電腦上通過“http://10.8.20.300:8081”訪問

 注意：

如果上面的路徑： root部分

改成：root   E:/Program Files/nginx-1.16.0/html/dist;

nginx會啟動不了

原因是：路徑名稱有空格要用引號引起來，應為不引會被當成2個路徑解析

解決方法：root   'E:/Program Files/nginx-1.16.0/html/dist';

 

完成nginx配置后重新加載配置文件，命令如下（ps:需要在安裝的根路徑下執行）：

nginx -s reload

 瀏覽器中訪問：http://localhost:8081