把遇到錯誤的、學習到的前端筆記在這邊

總網頁瀏覽量

Copyright © Tzeng Ying-chi. 技術提供:Blogger.

2018/11/16

〔筆記〕使用vscode達到 php 運行 live-server ,存檔即時變更頁面


今天要來紀錄怎麼使用VSCode達到 php 運行 live-server ,存檔即時變更

因為在撰寫html上,html屬於用戶端(Client-side),作業上都是在客戶端進行不會有server端的問題,所以進行存檔頁面即變更較為簡易,網路上也有很多套件可以用 。

可是在php上,php屬於伺服器端(Server-Side),一變更小則前端頁面變化大則連動到伺服器、資料庫的變動,所以在live-server上的可行性一直以來都是一個問題!

不過現在VScode做到了可以將php的檔案運行live-server,在開發上順暢很多!
也大大縮短了時間,不用在存檔→去頁面按重新整理→在debug了~

現在就來紀錄設定過程。

簡述我的開發環境


- 系統:
MacOS

- 編輯器(IDE):
VSCode - https://code.visualstudio.com/


- 本機伺服器環境(local server environment):
MAMP - https://www.mamp.info/en/


- 瀏覽器(Broswer):
Google Chrome

設定過程


1.首先先安裝好開發要件
VSCode、MAMP、Google Chrome都先下載安裝完畢

2.安裝套件
VSCode裡請安裝" Live-Server "
https://github.com/ritwickdey/vscode-live-server

安裝完成後VSCodec會請你Reload一下,讓套件生效。

瀏覽器方面則需要裝Web Extension,看你用哪種瀏覽器,現在好像只有Chrome和Firefox有而已,筆者是用Chrome瀏覽器來做開發,所以待會也會用Chrome來Demo。

.連結如下 Store Links
Chrome : https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/
Firefox : https://addons.mozilla.org/en-US/firefox/addon/live-server-web-extension/


3.環境設定

- VSCode 環境設定-

選到VSCode的設定
Preferences → Settings


選到User Settings → Extensions → Live Server Config 
裡面有一個


Settings: Use Web Ext 
You have to install a browser extension. That will be works for your dynamic pages (like PHP).

這個選項請打勾勾

Settings: live-Server Host 選項
因為我習慣用"localhost"當Domain,所以我是設定"localhost",當然要看你是用什麼server的整合環境,是用"127.0.0.1"還是"localhost"來作調整,因環境而異。


Settings: HostTo switch between localhost or 127.0.0.1 or anything else. Default is 127.0.0.1
localhost


Settings: live-Server port 選項
這個沒有在ui的調整介面裡,在設定檔的json裡設定,那port的部分請調整為走 "5500" 埠號

以上的設定都可以在json檔裡做直接設定,如下

"liveServer.settings.host": "localhost",
"liveServer.settings.port": 5500,
"liveServer.settings.useWebExt": true


- MAMP 環境設定-

我是用Apache,不是Nginx,設定為80port即可

- 瀏覽器 Extension 環境設定-

設定方式如圖所示



運行啟動


先啟動本機Server的服務,開啟MAMP把服務先開啟
再把專案資料夾用VSCode開啟之後,
按下下面的"Go Live",會看到starting... → Θ5500port的轉變
並跳出視窗來,代表成功啟動 Live-server。



然而,當我們點開Live-server所跳出的視窗.php檔,卻會出現下載的提示出來是怎麼回事呢?

不是沒作用,我們要回到用MAMP server所開啟的localhost目錄下,開啟剛剛的專案就可以進行Live-server的功能了,可以看到存檔即變更頁面,非常的方便!




以上就是整個使用VScode開發php,並達到存檔即時變更頁面的設定與注意過程!

這邊要感謝Turking網友大大的指導,得以讓開發變更順利~感謝您^^

--------------------------------------------------------
做圖和寫文很累,如果有分享的需求請載明來源出處,
請勿盜圖與拷貝,尊重著作者~感謝您^^

© 圖為 曾英綺 版權所有,請勿盜圖等相關動作
[ 著作權為 Ying-chi Tzeng 曾英綺 所有,轉載請告知 ]
--------------------------------------------------------


12 則留言:

  1. 你好,最近在嘗試live_server及時編寫php,卻也遇到下載的問題,幸好有看到這文章,感謝^^!

    回覆刪除
    回覆
    1. 哈 有幫助到你很開心^^謝謝你的回饋~
      一起交流!!

      刪除
  2. 這兩天研究在VScode運行php爬文很久,幸好看到你這篇才搞定 非常感謝呀~

    回覆刪除
    回覆
    1. 呵呵~不客氣,我也是受人幫助才寫這篇的,有幫助到你真的太棒了^^

      刪除
  3. 十分感激,幸好看到你写的这篇文章

    回覆刪除
  4. 請問大大要怎麼進到localhost目錄呢?目前卡在這關無法成功QQ

    回覆刪除
    回覆
    1. 您好:您有開啟伺服器服務嗎?通常要啟動Apache網頁伺服器之後,在網址列打localhost就會看到了~

      刪除
  5. 剛好有操作到這一塊,謝謝文章說明

    回覆刪除