寶塔部署vue項目詳解

一、項目環境準備

1、安裝寶塔面板

如果你還沒有安裝寶塔面板，可以在官網上進行下載並按照官方文檔進行安裝，寶塔面板是一款非常好用的服務器運維工具。

2、安裝nodejs環境

在寶塔面板中的軟件商店中找到nodejs並且按照提示進行安裝，nodejs需要最好選擇最新的穩定版本。

3、安裝vue-cli腳手架

在終端中執行命令：npm install -g vue-cli，以全局方式安裝vue-cli腳手架，vue-cli可以快速構建出vue項目的基礎環境。

4、安裝git

在寶塔面板中的軟件商店中找到git並且按照提示進行安裝，git需要用於從代碼倉庫進行代碼的拉取。

二、拉取vue項目代碼

將vue項目代碼通過git進行拉取，這裡以github為例：

git clone https://github.com/user/repo.git

如果沒有將代碼放到指定目錄下，那麼需要進入到項目目錄下執行以下命令：

cd repo

三、安裝依賴

在項目目錄下執行以下命令，安裝所需依賴包：

npm install

通常情況下，這個過程會耗費一些時間，請保持耐心。

四、打包項目文件

在項目目錄下執行以下命令，打包項目：

npm run build

完成後，會在項目目錄下生成一個/dist目錄，裡面包含了最終生成的靜態文件。

五、創建站點並上傳項目文件

在寶塔面板中，選擇網站->添加網站，輸入網站相關信息，確認後即可創建站點。

進入站點後，選擇文件管理器->web目錄，創建一個新的目錄用於存放vue項目文件。

將剛才打包生成的靜態文件進行上傳，並將文件的權限設置為www:www。

六、配置nginx反向代理

在寶塔面板中，選擇站點->反向代理，添加一個新的反向代理規則：

代理名稱: vue
代理協議: http
代理目錄: /
目標URL: http://127.0.0.1:port or 主機ip:port

按照以上規則進行配置後，提交即可生效。

七、配置nginx轉發策略

在寶塔面板中，選擇站點->配置文件，找到nginx.conf文件進行編輯。打開文件後，將以下代碼添加到http塊中：

location / {
    proxy_pass http://127.0.0.1:port or 主機ip:port;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

按照以上規則進行配置後，提交即可生效。

八、啟動項目

在項目目錄下執行以下命令，啟動項目：

npm run start

如果需要使用pm2進行管理，那麼可以執行以下命令進行安裝：

npm install -g pm2

直接使用pm2啟動項目：

pm2 start npm --name "vue-demo" -- start

總結

以上就是寶塔部署vue項目的詳細流程，按照以上步驟進行操作，基本上可以在幾分鐘的時間內完成vue項目的部署工作。但是需要注意的是，以上過程中可能會遇到一些問題，遇到問題的時候需要多看一看官方文檔或者詢問其他開發者的意見。希望這篇文章能夠對vue開發者在寶塔上部署vue項目有所幫助。