样式表未显示在 WAMP 项目中

Question

我一直关注this guide 使用虚拟主机设置 WAMP 项目。

当我浏览到“localhost/website”时，它会加载我的主页，但没有样式表或任何图像。这是文件结构：

• wamp/www/website/index.php
• wamp/www/website/images/image.png
• wamp/www/website/styles/style.css

httpd-vhosts.conf：

<VirtualHost *:80>
    DocumentRoot "c:/wamp/www"
    ServerName localhost
    ServerAlias localhost
    <Directory "c:/wamp/www">
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "c:/wamp/www/website"
    ServerName website
    <Directory "c:/wamp/www/website">
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

---

另外，顺便说一句，我无法让“我的虚拟主机”部分出现在 wampmanager 菜单中；我已经添加了指南中的参数并重新启动了 wampserver，但我仍然没有看到它。这是我在 wampmanager.tpl 中的 [Menu.Left] 部分：

[Menu.Left]
;WAMPMENULEFTSTART
Type: separator; Caption: "Powered by Alter Way"
Type: item; Caption: "${w_localhost}"; Action: run; FileName: "${c_navigator}"; Parameters: "http://localhost/"; Glyph: 5
;WAMPPROJECTSUBMENU
;WAMPVHOSTSUBMENU

Answer 1

如果 HTML 中样式表的路径是 styles/style.css 或 /styles/style.css，那么它将指向 wamp/www/styles/style.css 而不是 wamp/www/website/styles /style.css。

由于您正在设置虚拟主机，我假设您打算使用它。您需要将浏览器指向 website/，而不是 localhost/website/。如果您将浏览器指向 localhost/website/，那么您实际上使用的是第一个虚拟主机条目，而不是第二个。

将浏览器指向正确的主机后，css 应该可以正常工作，因为它将指向 wamp/www/website/styles/style.css。

Answer 2

我假设您已经在 \wamp\bin\apache\apachex.y.z\conf\extra\httpd-vhost.conf 文件中创建了虚拟主机定义？

您是否还取消了 httpd.conf 中包含该文件到配置中的行的注释？

编辑httpd.conf，文件底部附近有这一行

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

通过删除# 符号取消注释该行。

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

您还需要将此添加到您的 HOSTS 文件中

将此添加到\windows\system32\drivers\etc\hosts

127.0.0.1 localhost website
::1 localhost website

Answer 3

如果您已经有 WAMP 工作，并且您的网站在 localhost 上加载正常，即：运行 WAMP 的 PC，但是当您从另一台 PC 加载网站/网页时，该网站会加载，但没有样式表并且看起来很简单和丑陋等，然后：

您唯一需要做的就是：

在 WordPress Admin -> 点击设置 -> 点击常规 -> 并从默认设置中替换“WordPress 地址 URL”和“站点地址 URL”：

“http://localhost/yourSiteName”到使用 WAMP PC 的 IP 地址的 URL

将 localhost 替换为 localhost 的 IP 地址，因此 URL 现在必须如下所示：

"http://192.168.1.27/yourSiteName" 那就是如果您的 WAMP PC 的 IP 地址 = 192.168.1.27

如果您不知道 WAMP PC 的 IP 地址，请通过单击 Windows 任务栏上的“开始”按钮在 WAMP PC 上打开命令提示符，然后从“开始”菜单中选择“运行”（或按Windows 按钮（在键盘左侧的 CTRL 和 ALT 之间）连同字母“R”（按此顺序））您将看到一个运行对话框出现，然后清除文本区域（如果它已经有任何内容），然后键入“cmd”，然后单击“确定”。

你会看到一个黑屏弹出，让你输入东西，如果屏幕上已经有东西，别担心它应该在那里，只需输入“ipconfig”，然后按 Enter 按钮您的键盘，然后查看屏幕上返回的结果，以了解喜欢的内容：

IPv4 地址........192.168.1.27

这是您的 IP 地址，即：192.168.1.27

现在在 WordPress 常规设置（上面讨论过）中替换 WordPress 站点 URL 的“localhost”部分，然后单击保存。

现在它可以工作了 - BOOM!!

---

额外提示：在 WordPress 管理站点中，单击菜单中的设置，单击设置菜单中的永久链接，然后将默认设置从“普通”更改为“帖子名称”。这将使您的所有 URL 和网页 URL 看起来最好。

例如：

Plain = "http:// 192.168.1.42/yourSiteName/?p=123"

或者，选择帖子名称：

Post Name = http:// 192.168.1.42/yourSiteName/awesome/people.php

在我看来，与朋友等分享会更好，更好......