使用vscode達到 php 運行 live-server
前言
之前直接使用瀏覽器打開的方式,算是很簡單上手,只需要安裝套件即可。html屬於用戶端(Client-side),都是在客戶端進行不會有server端的問題,
可是php屬於伺服器端(Server-Side),從前端頁面變化到伺服器、資料庫的變動,live-server上的適用各家都在努力,現在VScode可以將php的檔案運行live-server,使開發PHP連動的前端網頁非常便利!
省去[存檔]->去頁面按重新整理->再debug的手續時間
把成功安裝的過程記錄下來:
過程
-
安裝好開發要件
VSCode、Docker、Google Chrome,並且讓Docker On
-
安裝套件
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Preferences → Settings
User Tab → Extensions → Live Server Config
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
裡面的Use Web Ext
,要打勾
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
還有Host要修改成自己環境的設定路徑,是要localhost
還是127.0.0.1
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
開啟Edit in settings.json
裡設定
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
新增 liveServer.settings.port": 5500
,請調整為 "5500" 埠號
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 瀏覽器 Extension 環境設定
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
滑鼠將拉霸向右開啟
-
實際專案路徑,注意這邊不是填docker裡build的port
-
Live-server中設定的port,根據之前設定是5500
-
專案資料夾用VSCode開啟之後,按底部的"Go Live",會看到starting…-> port:5500
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
並跳出視窗來,代表成功啟動 Live-server
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
-
點開Live-server所跳出的視窗.php檔,卻會出現下載的提示,讓我驚恐到底是啥?不是沒作用,回到用docker所開啟的localhost網頁,重新整理可以看到存檔即可改變頁面,上路囉!
上是使用VScode開發php完成存檔即時變更頁面的設定過程,主要參考這篇作者文章而完成,感謝!