怎么使用Nginx部署Vue項目

本篇內容主要講解“怎么使用Nginx部署Vue項目”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用Nginx部署Vue項目”吧!

一、安裝Nginx

1. 使用XShell連接我們的服務器

2. 配置 EPEL源

sudo yum install -y epel-release
sudo yum -y update

3. 安裝Nginx

sudo yum install -y nginx

以下的內容需要記住，特別是配置文件
安裝成功后，默認的網站目錄為： /usr/share/nginx/html
默認的配置文件為：/etc/nginx/nginx.conf

4. 開啟端口80和443

前提是要先打開防火墻

systemctl start firewalld.service

重啟防火墻：firewall-cmd --reload
查看防火墻狀態firewall-cmd --state
關閉防火墻systemctl stop firewalld.service
開啟端口firewall-cmd --add-port=8890/tcp --permanent （8890替換為要開啟的那個端口）
開啟80和443firewall-cmd --permanent --zone=public --add-service=httpfirewall-cmd --permanent --zone=public --add-service=https
開啟后要記得重啟防火墻 5. 服務器開啟80和443端口號

打開服務器，點擊防火墻，然后點擊添加規則

在端口范圍那里添加我們需要的就行了，這里我們就添加80和443

6. Nginx 基本命令

啟動：systemctl start nginx
重啟：systemctl restart nginx
關閉：systemctl stop nginx
查看狀態：systemctl status nginx
開啟開機自動啟動：systemctl enable nginx
關閉開機自動啟動：systemctl disable nginx

7. 驗證是否安裝成功

在電腦瀏覽器輸入服務器的ip地址，出現歡迎到nginx就代表成功了，那么就可以下一步了

二、部署vue

1. 打包vue項目

npm run build // 這個看情況 如果是版本那么就根據情況

2. 上傳到服務器

我們這里是把這個放到了 /usr/local/webapp這個文件夾里面
我們可以使用xftp進行上傳

3. nginx配置

執行 vim /etc/nginx/nginx.conf命令 進入配置文件

這樣我們的vue就部署完成了
記得重啟一下nginx

4. 測試

在瀏覽器輸入我們服務器的ip地址加上端口號就可以了

如果是其他端口那么就要考慮服務器和阿里云有沒有開放該端口號

到此，相信大家對“怎么使用Nginx部署Vue項目”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！