phptudy配置虚拟域名的详细步骤

分手后的思念是犯贱 2022-05-12 14:46 199阅读 0赞

## 前言 ##

我们都知道，我们写HTML的时候，可以直接通过浏览器打开。如果没有部署到服务器而直接打开的话，浏览器的地址栏上显示的是 以 `file://`开头的html的磁盘文件路径，而不是像我们平时浏览网页的时候以 `http://` 开头的。  
![在这里插入图片描述][70]

如果我们设计的html文件需要以网页的形式部署到服务器上，到时候就需要以http协议访问，所以我们在开发的时候，就需要尽可能的模仿线上的环境，架设本地的服务器，避免file协议和html协议的差异引起的莫名错误。  
所以下面我们就通过一个phpstudy构造一个虚拟的域名，使得我们能通过这个域名访问我们本地的HTML文件。

## 安装phpstudy ##

下载地址：[http://phpstudy.php.cn/][http_phpstudy.php.cn]

## 配置虚拟域名 ##

#### 第一步.增加域名: ####

鼠标左键单击`其他菜单选项`，选择站点域名管理。  
![在这里插入图片描述][70 1]  
在弹出的窗口里，在`网站域`填写一个你觉得好记的域名，第二域不填。然后点击`新增`，然后点击`保存设置并生成配置文件`。  
![在这里插入图片描述][70 2]  
![在这里插入图片描述][70 3]

#### 第二步 修改host文件 ####

打开host文件。`#`代表注释，所以前面带有`#`的语句是不起作用的。  
我们打开host文件，添加一行语句：`127.0.0.1 www.manzuo.com` **后面这个网址记得改成你自己刚刚写的域名。** 然后保存文件。

![在这里插入图片描述][70 4]  
![在这里插入图片描述][70 5]

我们启动phpstudy。然后试着用命令行窗口ping一下我们刚刚定义的虚拟域名。  
![在这里插入图片描述][70 6]

可以看到返回的ip地址就是我们在host文件里定义的ip地址。说明前面的步骤你已经成功了。当然，你也可以直接在我们的浏览器直接打开你自己定义的虚拟域名，会看到屏幕上输出helloworld。这实际上是我们安装的phpstudy的时候，软件自带的一个php实例。（这个PHP文件路径为：`[phpstudy安装目录]\PHPTutorial\WWW`）  
![在这里插入图片描述][70 7]  
![在这里插入图片描述][70 8]

#### 第三步 修改虚拟域名指向的目录 ####

默认情况下，创建的虚拟域名指向的是`[phpstudy安装目录]\PHPTutorial\WWW`,即把这个文件夹作为网站的根目录。  
下面我们就来修改配置文件，让虚拟域名指向我们自定义的路径。  
选择 `打开配置文件` \->`vhosts.ini`  
![在这里插入图片描述][70 9]

![在这里插入图片描述][70 10]

打开以后，就可以看到我们自定义的虚拟域名指向的是 `D:\phpStudy\PHPTutorial\WWW`， 这个是php安装目录下的自带的示例。现在我们就把指向的路径更改一下，指向我们自己的html文件夹所在的位置。  
比如，笔者html文件夹对应的html根目录如下：  
![在这里插入图片描述][70 11]

那我们就把`vhosts.ini`文件修改下，主要是修改`DocumentRoot`和`Directory`两处地方，如图  
![在这里插入图片描述][70 12]  
然后 `Ctrl+s`保存文件，在浏览器输入自己定义的虚拟域名，如：  
![在这里插入图片描述][70 13]  
大功告成。

### 这里分享下笔者踩过的坑，也是读者需要注意的地方 ###

1.  放置css的css文件夹，放置图片的picture文件夹（放置其他资源的文件夹要类似）必须在html文件夹（也就是`DocumentRoot`指向的路径）下，不能和html文件夹是同级目录。不然就访问不到这些资源。
2.  域名指向的文件根目录下，也就是`DocumentRoot`指向的路径下，必须有index.html或者index.php两个文件之一，phpstudy会自动识别根目录下是否含有这两个文件之一，如果有，这个index.html或index.php就会默认被当成首页来显示。如果没有，页面会显示 403错误。![在这里插入图片描述][70 14]
3.  配置过程中，用浏览器访问域名的时候，最好使用无痕模式访问，避免因为cookie等问题发生一些错误。比如笔者多次修改站点指向路径的时候，没有用无痕模式访问，有时候看起来配置成功了，图片和css资源都成功加载了，实际上是浏览器的cookie填充的内容。
4.  没修改一次配置文件，都要点击重启phpstudy，让修改生效。
5.  编写html的时候，引用文件资源的时候，强烈推荐使用相对路径，不要采用绝对路径。

[70]: /images/20220504/a5c82b12fcd847cc82e6b9332721bba7.png
[http_phpstudy.php.cn]: http://phpstudy.php.cn/
[70 1]: /images/20220504/a1e721f24be84c63899ccf1636cc663a.png
[70 2]: /images/20220504/2fc0afaac0ba4a1baa6d82d6204a542d.png
[70 3]: /images/20220504/1dc7738e155f4b74b0df9886ffd956bc.png
[70 4]: /images/20220504/88342a0f95b44b288a43d368403cea00.png
[70 5]: /images/20220504/ee6bba2a21264e5fb20aad6f730729c3.png
[70 6]: /images/20220504/22c503db9cb3484da7f24b576165af73.png
[70 7]: /images/20220504/377913b0e3194a7ba8a960c000a19897.png
[70 8]: /images/20220504/00858aeac5da4a108f6c532097b5a216.png
[70 9]: /images/20220504/5c8a7174a5df489a97bcb37dc0e55a90.png
[70 10]: /images/20220504/7231305f06f84e5bb446023968bea9c9.png
[70 11]: /images/20220504/46cade02b8684728882a158e52601262.png
[70 12]: /images/20220504/19a9f366545c422eba6aab42a5ce0275.png
[70 13]: /images/20220504/c696542a86794b27ad23ee713d0f660c.png
[70 14]: /images/20220504/2ceedcad65e84929bf25450f1fa60338.png