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反向代理
在寶塔面板里面找到新建的站點,打開設置
最后點擊提交就可以了,再次打開地址就可以看到數據請求回來了。