vue項目通過寶塔放到服務器上


vue項目完成之后需要進行打包然后放到服務器上,這里我采用的是寶塔面板來操作,

1、首先使用Xshell連接服務器,打開軟件之后會彈出這樣的面板,然后點擊新建,輸入主機地址,其他的看自己需求更改,然后點擊用戶身份驗證,輸入用戶名和密碼之后,點擊連接即可連接到服務器。

 

 

 

 

2、 接下來就是連接成功服務器的畫面了,輸入“ls /”指令即可查看服務器中的文件,這里面的也有一個文件是沒有的,install.sh這個文件,這是后來我自己做東西添加的,其他的都應該是有的,這里面的文件都盡量不要亂動,只需要使用www文件夾

 3、安裝寶塔面板,直接輸入命令,具體的可以看官網:https://www.bt.cn/download/linux.html

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

 

 我這里是提前安裝過的,所以我這里就不需要在直接安裝了,已經安裝過的可以直接輸入指令“bt default”。

 

 記住這里的賬戶和密碼,記不住也沒關系,下次重新打開輸入bt default指令也會有,這里我用得外網地址(我也不知道外網和內網有啥區別,看外網順眼吧)。

 4、在瀏覽器打開外網地址,然后就可以看到這樣的頁面,輸入賬戶和密碼就可以了(登錄面板之后也可以在里面改賬戶密碼)

 

 

 

 

 5、進入寶塔面板之后,就會有這樣的彈出框,根據自己安裝那個都行,或者在軟件商店里面安裝自己需要的

 

 

 

 6、接下來就是創建站點了,我之前創建過站點了,所以就不在創建了,記住站點的跟目錄即可,因為這里是需要放置我們打包之后的項目的。

 

 7、打包vue項目,打開package.json文件,查看里面的打包命令,然后輸入命令就可以看到打包之后的文件(我的就是默認dist文件),在打包之前修改在public文件中的index.html引入的css樣式文件,不要“./”開頭,改為“/”開頭,這樣放到服務器上會報錯,找不到樣式文件的。

npm run build

 

打包之后就可以看到這些文件,大概就是這些東西,

 

 

 8、打開站點的目錄,將dist文件中的內容放進去,直接拖拽即可,(里面的文件是我其他其他的文件,不用管)

 

 9、然后再瀏覽器上輸入自己的服務器地址,此時你的項目可能會運行,但是數據可能會請求失敗,報錯類似這樣的錯誤,這是因為配置nginx反向代理。

 

 10、配置nginx反向代理

在寶塔面板里面找到新建的站點,打開設置

 

 

 

 最后點擊提交就可以了,再次打開地址就可以看到數據請求回來了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM