隨著Vue框架在Web前端開發中的普及，越來越多的開發者在使用Vue建立自己的Web應用程式。而對大多數開發者來說，Vue專案的本地開發並不算什麼問題，但是如何將專案部署到伺服器上則是一個比較麻煩的問題。本文將分享一些Vue專案部署到伺服器的經驗和技巧。
一、伺服器環境準備
在部署Vue專案之前，需要準備一台伺服器並安裝好Node.js和NPM環境。 Node.js是一種基於Chrome V8引擎的JavaScript運行環境，可以運行JavaScript程式碼，而NPM則是Node.js的套件管理工具，用於安裝、管理和發布JavaScript套件。如果您還沒有安裝Node.js和NPM，請先安裝這兩個軟體。
另外，在伺服器上還需要安裝Git和PM2這兩個工具，Git是一個版本控制系統，用於從程式碼庫中拉取程式碼，而PM2是一個守護程式管理器，可以啟動、停止、重新啟動和監控Node.js應用程式。
二、設定Nginx伺服器
在將Vue專案部署到伺服器上之前，需要先設定Nginx伺服器來處理HTTP請求。 Nginx是一個高效能的HTTP和反向代理伺服器，可以將請求路由到不同的連接埠上，同時也可以啟用SSL憑證提供HTTPS支援。
在設定Nginx之前，需要先將Vue項目打包成靜態文件，這可以透過使用Vue CLI中的build指令來實現：
$ npm run build
執行完這個指令後，將在專案根目錄下產生一個dist目錄，其中包含了打包好的靜態檔案。
接下來，在伺服器上使用以下指令安裝Nginx：
$ sudo apt-get update $ sudo apt-get install nginx
安裝完畢後，可以編輯/etc/nginx/sites-available/default檔案來設定Nginx伺服器：
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html;
server_name example.com;
location / {
try_files $uri $uri/ /index.html;
}
}在這個範例中，設定了一個監聽80埠的Nginx伺服器，root指令用來設定Nginx的根目錄，server_name用來設定伺服器名稱，location指令用來設定請求路由。
要注意的是，由於Vue專案是一個單頁應用程式(SPA)，所以所有的頁面都是由JavaScript和CSS動態產生的，因此在Nginx伺服器中需要新增一個location指令來處理動態路由：
location /api/ {
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}在這個範例中，當請求/api/路徑時，將其代理到本機的3000連接埠上，並設定了一些HTTP頭部資訊。
三、部署Vue專案到伺服器
一旦Nginx伺服器設定好了，就可以將Vue專案部署到伺服器上了。以下是一些具體的步驟：
$ git clone https://github.com/username/vue-project.git
$ cd vue-project $ npm install
{
"name": "vue-project",
"script": "npm",
"args": "start",
"env": {
"NODE_ENV": "production"
}
}在這個範例中，設定了一個名為vue-project的進程，使用npm start命令啟動應用程序，並設定了生產環境變數。
$ pm2 start pm2.config.js
這樣就可以在伺服器上啟動一個Vue項目，透過存取Nginx伺服器上的URL來存取應用程式。
四、結語
在本文中，介紹如何將Vue專案部署到伺服器上。透過簡單的配置，可以將Vue專案部署到生產環境中，並且使用Nginx和PM2提供強大的HTTP服務和進程管理功能。希望這篇文章對於想要將Vue專案部署到伺服器上的開發者有所幫助。
以上是vue專案如何部署伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
