vue專案打包放到伺服器上執行

vue專案完成之後需要進行打包然後放到伺服器上，這裡我採用的是寶塔面板來操作，

1、首先使用xshell連線伺服器，開啟軟體之後會彈出這樣的面板，然後點選新建，輸入主機位址，其他的看自己需求更改，然後點選使用者身份驗證，輸入使用者名稱和密碼之後，點選連線即可連線到伺服器。

2、接下來就是連線成功伺服器的畫面了，輸入「ls /」指令即可檢視伺服器中的檔案，這裡面的也有乙個檔案是沒有的，install.sh這個檔案，這是後來我自己做東西新增的，其他的都應該是有的，這裡面的檔案都盡量不要亂動，只需要使用www資料夾

3、安裝寶塔面板，直接輸入命令，具體的可以看官網：

我這裡是提前安裝過的，所以我這裡就不需要在直接安裝了，已經安裝過的可以直接輸入指令「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反向**

在寶塔面板裡面找到新建的站點，開啟設定

最後點選提交就可以了，再次開啟位址就可以看到資料請求回來了。