vue專案nginx伺服器部署

Vue.js 是一款用於構建 Web 介面的漸進式框架，由於其高效、靈活、易用等優點，已經成為前端開發的熱門選擇之一。

在開發 Vue 專案後，通常需要將其部署到伺服器上進行線上訪問，而 Nginx 作為一個高效能的 Web 伺服器，也是常用的部署工具之一。

下面就是 Vue 專案在 Nginx 伺服器上部署的詳細教程。

前提條件

在進行部署之前，需要確保滿足以下條件：

• 已經開啟伺服器的 Nginx 服務。
• 已經安裝 Node.js，且版本不低於 8.9.0。
• 已經使用 Vue CLI 3 建立好了專案，並在本地執行成功。

打包專案

在進行部署前，需要將 Vue 專案打包成靜態檔案，並將其部署到伺服器上。在專案的根目錄下，執行以下命令進行打包：

npm run build

此命令將會在專案的  dist 目錄下生成打包後的靜態檔案。

配置 Nginx

1. 在伺服器上安裝 Nginx，並使用管理員許可權開啟 Nginx 配置檔案：

   sudo vi /etc/nginx/nginx.conf

2. 找到  http 部分的配置，新增以下配置資訊：

   server {  listen 80;  # 監聽的埠號
     server_name example.com;  # 伺服器名稱
     root /path/to/project/dist;  # 專案打包生成的靜態檔案所在路徑
     location / {    try_files $uri $uri/ /index.html;  # 配置路由，使得頁面重新整理後能夠正確展示
     }
   }

   其中， example.com 為伺服器的域名或 IP 地址， /path/to/project/dist 為專案打包生成的靜態檔案所在路徑。

3. 儲存並關閉配置檔案，並重啟 Nginx 服務：

   sudo service nginx restart

4. 配置防火牆

   如果在伺服器上啟用了防火牆，需要開啟 80 埠，否則無法訪問 Vue 專案。執行以下命令開啟 80 埠：

   sudo firewall-cmd --zone=public --add-port=80/tcp --permanent
   sudo firewall-cmd --reload

測試訪問

完成以上步驟後，就可以透過瀏覽器訪問 Vue 專案了。在瀏覽器中輸入伺服器的域名或 IP 地址，即可訪問專案的首頁。

結論

以上就是 Vue 專案在 Nginx 伺服器上部署的詳細教程。透過這個教程，您可以學習到如何使用 Nginx 部署 Vue 專案，並使其能夠線上上正常執行。