Angular 6 项目和wamp服务器无法从同一网络上的其他计算机访问项目

Question

我正在使用 wampserver 作为我的 angular 应用程序的本地服务器。

我使用 ng build --prod --aot 命令构建了我的应用程序。然后我将 dist 文件夹放入名为 angular.local 的 wamp 虚拟主机中，在 httpd-vhosts.conf 配置文件中包含以下脚本：

<VirtualHost *:80>
    ServerName angular
    DocumentRoot "c:/wamp64/www/angular"
    <Directory  "c:/wamp64/www/angular/">
        #Options +Indexes +Includes +FollowSymLinks +MultiViews
        #AllowOverride All
        #Require local
        Allow from 127.0.0.1
        Allow from 192.168.0.140
        Require all granted
    </Directory>
</VirtualHost>

其中 192.168.0.140 是我们要从中访问应用程序的用户笔记本电脑的网络 IP 地址。

在服务器 system32 主机文件中，我添加了以下行：

192.168.0.109 angular.local
::1 angular.local

其中 192.168.0.109 是服务器的 IP 地址。

当用户尝试使用 link:

访问应用程序时

http://192.168.0.109/angular/

我们可以在 google chrome 选项卡标题上看到应用程序的标题，但在控制台出现 3 个错误：

未找到运行时、样式和主要 java 脚本文件。

我在服务器 angular 文件夹中检查了它们，它们确实存在。

我做了同样的事in this link。

我在项目文件夹中有 .htaccess。

我可以使用 http://192.168.0.109/ 访问本地主机页面。

我尝试使用以下 link 但它没有用：

http://angular.local/

有什么想法吗？

Answer 1

您使用 APache 2.2 语法和 Apache 2.4 语法混淆了 APache。所以坚持使用 Apache 2.4 语法。

另外你的ServerName应该是ServerName angular.local

<VirtualHost *:80>
    ServerName angular.local
    DocumentRoot "c:/wamp64/www/angular"
    <Directory  "c:/wamp64/www/angular/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
        Require ip 192.168.0.140
    </Directory>
</VirtualHost>

还有 dev.local 的另一个 VH，因此假设它位于 www

下名为 dev 的文件夹中

<VirtualHost *:80>
    ServerName dev.local
    DocumentRoot "c:/wamp64/www/dev"
    <Directory  "c:/wamp64/www/dev/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
        Require ip 192.168.0.140
    </Directory>
</VirtualHost>

如果你想允许来自本地网络中的任何 ip，那么我们而不是上面的那个

Require ip 192.168.0

您还必须像这样将域名添加到其他电脑上的主机文件中，假设 WAMPServer 是运行 IP 192.168.0.10

192.168.0.10 angular.local
192.168.0.10 dev.local

Answer 2

使用以下代码：

<VirtualHost *:80>

 ServerName servername.com
 DocumentRoot path/to/dist

 <Directory "path/to/dist">
    Options Indexes FollowSymLinks
    AllowOverride all
    Require all granted
 #   Require local
 </Directory>

</VirtualHost>

我有相同的 angular 应用程序，使用 ng build 构建并将 dist 文件夹添加到 apache2 以上是我的 vhosts.conf 文件。非常适合我。

Angular 6 项目和wamp服务器无法从同一网络上的其他计算机访问项目

Angular 6 project and wamp server can't access the project from other computer on the same network

wamp

localhost

wampserver

angular

angular6