给vscode PHP项目配置live server，配合Chrome扩展实现实时刷新

摘要

正在生成中……

首先安装Live Server 的Chrome扩展，地址

完成后，打开vscode，在商店寻找并安装live server的vscode插件。

以当前开发 Laravel项目为例：启用开发服务器，让它在8001端口监听。这样 http://127.0.0.1:8001 就是它的预览地址，命令为：

php artisan serve --port 8001

同时注意打开编辑器下文的 live server标签，默认为5500端口。

同时在项目根目录新建或编辑 .vscode/settings.json ，内容如下：

{
    // Mainly for static files
    "liveServer.settings.useWebExt": true,

    // This means that you change your real URL (current PHP url) 
    // to another URL (which Live Sever starts).
    "liveServer.settings.proxy": {
        "enable": true,                             //   i. enabled
        "baseUri": "/",                             //  ii. workspace
        "proxyUri": "http://127.0.0.1:8001 // iii. actual address
    },
}

这样就完成了在vscode端的配置，接下来配置live server的Chrome扩展如下：

这时在vscode中的更改保存文件后会自动重新刷新预览的页面。