WampServer+VS Code + PHP开发环境搭建

时间：2023-07-12 14:33:01 | 来源：网站运营

时间：2023-07-12 14:33:01 来源：网站运营

WampServer+VS Code + PHP开发环境搭建：第一步：安装DirectX修复工具

DirectX修复工具(DirectX Repair)是一款系统级工具软件，简便易用。本程序的主要功能是检测当前系统的DirectX状态，如果发现异常则进行修复。程序主要针对0xc000007b问题设计，可以完美修复该问题。本程序中包含了最新版的DirectX redist(Jun2010)，并且全部DX文件都有Microsoft的数字签名，安全放心。

本程序为了应对一般电脑用户的使用，采用了易用的一键式设计，只要点击主界面上的“检测并修复”按钮，程序就会自动完成校验、检测、下载、修复以及注册的全部功能，无需用户的介入。
下载地址：DirectX修复工具

不先修复电脑用户Windows系统，后面使用WampServer会有许多小问题出现。WampServer是针对Windows系统用户的。


第二步 安装Wampserver

1.下载地址：WampServer
Wampserver 是从英文翻译而来的。
WampServer是指用于Microsoft Windows操作系统的解决方案堆栈，由Romain Bourdon创建，由Apache Web服务器，支持SSL的OpenSSL，MySQL数据库和PHP编程语言组成。它是由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包，可免去开发人员将时间花费在繁琐的配置环境过程。
但是假如初学者不掌握其中的基本要领，连续花费几小时到几天仍然无法达到搭建成功在本地开发的开发环境也是时有出现。












2.匹配版本
版本不一致的软件整合使用导致的问题，会浪费许多不必要投入的时间。
在基础阶段版本以稳定、够用选择标准。
不要一味追求最新的版本，但也不能选择过早的旧版本。
选择自己安装的php的版本的位置，这里虽然有php7.4.0版本，但是以上时间阶段WampServer中用的却是7.3.12版本，所以这里要选择7.3.12版本，这样才能安装后面的一些可以带来更多方便的插件。因为有一些好用的能够带来极大便利的插件最新款的并没有出现或者被发现、了解。

第三步，配置路径、修改端口
1.设置环境变量（见图）







2.有两个地方需要修改：修改listen80、servername 端口为8070。修改好请保存。

这是任督二脉的第一条经络，还有编译器VS Code（其他编译器也可，但是这个编译器功能极为强大，而且免费）的配置打通第二条经络，两条打通，代码开发才能运行起来。
3.在D盘Wamp 文件包里找到WWW目录，新增加一个XXX-php文件包，在里面放入开发的文件，或者框架模板代码。比如本人文件包起名John-php



第四步、下载VS Code、配置PHP开发所需插件
1.VS Code下载：Download Visual Studio Code

安装后VS Code在左下脚的头像图标处登入自己的邮箱新建一个账户。这样可以避免在新的电脑或者重装后重新配置编译器。



2、安装扩展
点击黄色标注的图标，可以选择第一个插件Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code改为中文版，这些英文其实十分简单，到时候熟悉了可以设置为英文，去掉中文扩展。因为代码开发文件的命名不能用中文，要下决心熟悉基本的计算机科学所需的英文表达规范。


3.善用开源
君子生非异也，善假于物也。

编程语言的选择，要及时关注社区活跃度、好用的新出现的扩展以及应用、本地区本国使用者人数规模、招聘网站显示对这种语言程序员的薪酬等。




VS Code 最常用的25个扩展：
用好这 25 个 VSCode 插件，让开发变得更简单、高效

建议新手花时间一个一个照着以上或其他网上的公益教程安装，配置，不要复制人家的josn配置。
这是代码开发需要的任督二脉第二条经脉。sittings.json里出现红色波浪纹说明路径错误需要删除后排除，重新安装。扩展不是越多越好，够用就好。因为安装太多后会影响编译器运行敏捷度。


PHP主要插件：10个必装的高效开发VSCode插件


开发环境搭建成功，编译器、前后端、服务器、数据库才能形成一个系统运行起来跑起来。

第四步 PHP Debug安装
（一）什么是Debug
Debug是计算机排除故障的意思。马克2号（Harvard Mark II）编制程序的格蕾丝·霍珀（Grace Hopper）是一位美国海军准将及计算机科学家，同时也是世界最早的一批程序设计师之一。有一天，她在调试设备时出现故障，拆开继电器后，发现有只飞蛾被夹扁在触点中间，从而“卡”住了机器的运行。于是，霍珀诙谐地把程序故障统称为“臭虫（Bug）”，把排除程序故障叫Debug，而这奇怪的“称呼”，竟成为后来计算机领域的专业行话。如DOS系统中的调试程序，程序名称就叫Debug。Debug在windows系统中也是极其重要的调试操作。^[1]

（二）匹配版本
1.xDebug的使用要和php版本配套。需要事先清楚与自己WAMP中PHP的版本完全匹配的xDebug的版本，否则会无法真正使得开发环境跑起来。
2.点击电脑右下角的WAMP绿色运行图标，再点击localhost,出现图3-6（请看本文第三步），点击phpinfo
会出现以下出，按ctrl+a全选该网页内容并复制，粘贴到：xdebug版本校验
https://xdebug.org/wizard



Installation WizardSummaryXdebug installed: 2.8.0Server API: Apache 2.0 HandlerWindows: yesCompiler: MS VC15Architecture: x64Zend Server: noPHP Version: 7.3.12Zend API nr: 320180731PHP API nr: 20180731Debug Build: noThread Safe Build: yesOPcache Loaded: yesConfiguration File Path: C:/WINDOWSConfiguration File: D:/wamp64/bin/apache/apache2.4.41/bin/php.iniExtensions directory: D:/wamp64/bin/php/php7.3.12/extInstructionsDownload php_xdebug-3.1.3-7.3-vc15-x86_64.dllMove the downloaded file to D:/wamp64/bin/php/php7.3.12/ext, and rename it to php_xdebug.dllUpdate D:/wamp64/bin/apache/apache2.4.41/bin/php.ini to have the line:zend_extension = xdebugMake sure that zend_extension = xdebug is below the line for OPcache.Please also update php.ini files in adjacent directories, as your system seems to be configured with a separate php.ini file for the web server and command line.Restart the Apache Webserver以上会出现你应该正确安装的xDebug版本，及其对应的配置文件的修改信息。

（三）安装并修改

1.根据推荐下载对应版本的xDebug.dll把下载好的dll文件添加到php的ext文件下，D:/wamp64/bin/php/php7.3.12/ext

Download php_xdebug-3.1.3-7.3-vc15-x86_64.dll

"D:/wamp64/bin/php/php7.3.12/ext/php_xdebug-3.1.3-7.3-vc15-x86_64.dll"


2.更新 php.ini 配置文件



3.按ctrl+F键查找zend_extension,修改其路径，注意会搜索到两个zend_extension
找到第二个，[xdebug]下面的，如果没有变，请参考如下格式到您自己的D盘复制D盘该路径到如下位置，以下的off改为on
xdebug.remote_enable = on

xdebug.profiler_enable = on

位置：

[xdebug]

zend_extension="D:/wamp64/bin/php/php7.3.12/zend_ext/php_xdebug-2.8.0-7.3-vc15-x86_64.dll"

xdebug.remote_enable = on

xdebug.profiler_enable = on

改为on以后注意保存再退出。


4.在扩展界面选择PHP Debug安装，成功后重启 VS Code。每一次新安装一个扩展后都需要重启 VS Code。

第五步 调试php文件

1.在www目录下新建test.php文件，在echo行前设置断点^[2]







2.输入如图代码（下文有源码可以复制），保存，再鼠标右键点击open inbrowser




3.右侧浏览器窗口清空后输入测试网址：http://localhost:8070/john-php/test.php

可复制以下最简单的测试代码测试一下;注意文件名称的后缀是.php，或者在VS Code新建文件后，可在文件格式选择栏输入php，会自动选择php格式。

<?php echo "这是我创建的第一个PHP文件"; ?>




4.测试html页面
多试几遍，肯定会成功。也可以测试html页面。

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>第一个Html文件</title> </head> <h1>下雪了</h1> <body></body></html>复制以上代代码可以按照以上方法测试html,另外开启浏览器输入http://localhost:8070/john-php/john.html




5.在VS Code里下载扩展 live server 打开浏览器
这是本人采用另外一种方法安装本地开发环境的。live server 可以登录http://127.0.0.1:5500/0311/john.html
输入自己起的域名测试也成功。
http://john.io/0311/john.html





总结：
1.最为重要的是各项服务的端口配置；端口问题、路径问题是经常会出现的，可参考学习 php中相对路径和绝对路径如何使用^[3]
2.Web环境的根目录设置。
理解了这两点内容，就知道了把Web项目拷贝到哪里，如何在浏览器中访问我们的项目。
3.掌握了以上两点可实时修改观察页面生成，利用VS Code自带的终端CLI安装网站框架,比如Vue，实现一个屏幕分成三个部分浏览。可大幅提高开发效率。
可参考本人之前的文章：如何通过CLI安装VUE
在VS Code可用自带的终端命令形式安装需要的配置文件。



4、WAMP多站点的配置

第1步，修改httpd.conf，增加8080端口的监听

#Listen 12.34.56.78:80
Listen 80
Listen 8080

第2步，修改virtual hosts的配置，同样在httpd.conf这个文件中。

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
#修改为
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

第3步，增加虚拟主机配置，修改httpd-vhosts.conf文件。

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
NameVirtualHost *:8080

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "C:/wamp/www/"
ServerName http://dummy-host.example.com
ServerAlias http://www.dummy-host.example.com
ErrorLog "logs/dummy-host.example.com-error.log"
CustomLog "logs/dummy-host.example.com-access.log" common
<Directory "C:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

<VirtualHost *:8080>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "C:/wamp/www2/"
ServerName http://dummy-host.example.com
ServerAlias http://www.dummy-host.example.com
ErrorLog "logs/dummy-host.example.com-error.log"
CustomLog "logs/dummy-host.example.com-access.log" common
<Directory "C:/wamp/www2/">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

第4步，重启apache，就可以看到效果了

5、添加本地域名访问
可先设一个本地测试用域名，比如http://www.john.io 在WWW目录里新建一个john-php文件包，所有框架源文件、已经保存的文件放在这。然后VS Code点击文件。文件包导入。 关于测试域名、数据库需要另外的设置，也是需要学习，暂不在本文中阐述，请参考文章所附资料。

（1）修改httpd-vhosts.conf文件
（2）配置WAMP网站根目录

具体请参考：^[4]

WAMP设置 - Builder


千里之行，始于足下。以上就是一种比较基本的WampServer+VS Code + PHP开发环境搭建方式，请同时阅读本文注释、参考文献。

参考

1. ^DEBUG计算机排除故障 https://baike.baidu.com/item/DEBUG/825293
2. ^测试断点以及相关配置 https://blog.csdn.net/weixin_43712064/article/details/103836504
3. ^php中相对路径和绝对路径如何使用（详解） https://www.cnblogs.com/Renyi-Fan/p/10890220.html
4. ^WAMP设置 https://www.cnblogs.com/zhengcheng/p/4321122.html