首頁 > 軟體

vue專案打包後部署到伺服器的詳細步驟

2022-09-16 22:02:29

耽誤了幾天, 終於開始寫第二篇部落格了, 這篇會講怎麼將vue專案打包部署到伺服器, 其實和上一篇的uni-app步驟一樣的, 就是最後多了一步修改nginx設定, 好 , 上操作

一 ,打包專案

vscode下載連結：

連結: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg

提取碼: 2jbf

1 , vscode開啟你的vue專案 -- > 點終端- > 新終端- >輸入npm run build 按回車 , 顯示正在打包..稍等一會

2 , 打包成功 , 生成了dist資料夾, 打包好的檔案存放在裡面

二 , 用一個工具, 把打包好的檔案上傳到你的伺服器 , 我用的是Xftp , 用別的工具也可以

下載連結：

連結: https://pan.baidu.com/s/18KLWFCff8rPZHS5Ys0JlBA

提取碼: 4chh

1.開啟Xftp, 點小視窗的新建

2 .點完之後彈出這個框, 填寫完資訊之後點連線 , 伺服器的相關資訊問公司的人要

3.點完連線之後 , 彈出這個框 , 點接受並儲存

4 .然後會看到右側出現了新建對談的視窗 , 表示連線到伺服器了,

左側是你自己的電腦本地, 右側是伺服器電腦

左側進到剛剛打包好的檔案存放路徑 , 把dist資料夾複製到右側伺服器中部署的資料夾裡, 看你們是部署到哪個資料夾就拖到哪裡

三 , 修改nginx設定,我用的是寶塔面板的方式

寶塔下載連結：

連結: https://pan.baidu.com/s/1nPvtEYL8IV6Egx265i8ofw

提取碼: zane

1 , 開啟寶塔面板, 設定 , 因為寶塔要在本地瀏覽器中開啟, 所以域名就寫本地 127.0.0.1 , 儲存設定後點開啟面板 ,會在瀏覽器中開啟, 點登入 (寶塔安裝和設定有不懂的可以搜一下別的部落格,有詳細介紹)

2 , 登入之後是這樣的, 點左邊的軟體管理

3 , 頂部的應用搜尋 nginx , 找到之後點右邊的安裝

4 , 安裝完後在第二頁 , 點右邊的設定

5 , 彈出一個框 , 點左邊的設定修改 ,卷軸拉到下面,按下圖示的修改後點儲存

6 , 儲存完之後點左邊的服務 , 點重啟

7 , 部署成功!! 開啟瀏覽器，輸入伺服器ip地址，存取一首頁的內容吧 ^_^

地址就是伺服器ip/部署的資料夾/index.html#/ , 比如伺服器ip是123.60.120.40:3006,部署的資料夾名字是app, 地址就是如下 (瞎寫的)

http://123.60.120.40:3006/app/index.html

到此這篇關於vue專案打包後部署到伺服器的文章就介紹到這了,更多相關vue打包部署伺服器內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

IT145.com E-mail:sddin#qq.com