Angular 6 应用程序如何在 wamp 上本地提供服务以及如何将丢失的文件导入索引页
ali*_*990 1 php wamp wampserver angular angular6
编辑#2
在我的www/目录中，我有我的服务器脚本和文件.htaccess：
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^([\w-]+)$ api.php [L]
DirectoryIndex api.php
#RewriteCond %{REQUEST_URI} !echo.php
#RewriteRule .* echo.php?ua=%{HTTP_USER_AGENT}&https=%{HTTPS} [L]
SetEnvIf Origin "^http(s)?://(.+\.)?(dev.local\.com|localhost:8100|localhost:4200)$" ORIGIN=$0
Header always set Access-Control-Allow-Origin %{ORIGIN}e env=ORIGIN
Header merge Vary Origin
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Content-Type, cookie"
Header set Content-Type "application/json"
Header set Access-Control-Allow-Methods "GET, POST"
# prevent mime based attacks
Header set X-Content-Type-Options "nosniff"
在我的桌面上，我有运行的 Angular 项目：
ng build --prod --aot
我里面有一个文件夹，名为dist/angular/，里面有所有相关文件。
我获取了dist/angular/内容并将其放入www/目录中并尝试运行该index.html文件，但出现以下错误：
我为我的组织完成了一个应用程序，基于 Angular 6 和 PHP 作为服务器端，我需要在本地测试它。我们的大部分作品将在本地制作，因为老板不希望任何信息通过网络传播（非政府组织数据）。
我跑：
ng-build --prod
我已经拿到了dist文件夹。但我打开了 dist 文件夹，不知道该怎么做，也不知道如何将其放在 wampserver 上以让用户从他们的计算机上测试它。
我检查了此链接及其关于添加的选定答案http-server。
http-server当使用 wampserver 作为本地服务器来为我们的应用程序提供服务时，与 合作是否是一个不错的选择？
编辑：
当我打开 index.html 文件时，出现 5 个错误：
index.html脚本：
<html lang="en">
<head>
<meta charset="utf-8">
<title>Registration System</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<!--Bootstrap 4-->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->
<link rel="stylesheet" href="styles.aa5ea5c31cd0cd659c6e.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.2b56e49bc4acc7387a7f.js"></script><script type="text/javascript" src="polyfills.6a1700e5ae732a3a8f93.js"></script><script type="text/javascript" src="main.35b38c7c508a8567ed23.js"></script></body>
</html>
当托管 Angular 应用程序时，您实际上可以只获取dist文件夹的内容并将其放入您的htdocs或www文件夹中。嗯，至少在最简单的情况下是这样。
但有一些注意事项。
当您想在服务器的根目录中单独提供服务时，上面的方法效果很好。
如果您从子文件夹托管 Angular 应用程序，则需要通过更改 index.html 文件中的以下行来更改应用程序的基本 URL：
<base href="/path/to/folder/">
另外，如果您还没有，您需要为 PHP 后端正确配置CORS 。
最后，您需要处理路由。这需要文件中的条目.htaccess按如下方式路由：
- 任何应该到达 Angular 应用程序的路径都必须路由到其
index.html. - 所有 JavaScript、CSS、字体和图像文件都应正常路由。
- PHP 文件仍应正常路由，最好路由到子文件夹以保持整洁。我喜欢用
/api这个。
例如，我有一个位于该/api文件夹中的 PHP 后端，以及一个从根目录提供服务的 Angular 应用程序。
因此，在我的服务器上的www文件夹中，我有我的index.html文件和各种 JavaScrpit 文件。PHP 文件位于下面www/api，.htaccess路由负责将所有 API 调用路由到/www/api，所有 JavaScript、图像、字体和样式路由到它们所在的位置，以及路由到 的所有其他路径/www/index.html。
这就是要点。只要.htaccess您的 CORS 设置正确，就不会有任何问题。
编辑
根据您显示 404 错误的更新，我想说您的主要问题是在.htaccess. 查找 Apache 的 URL 重写。
编辑
这个答案显示了一个简单的.htaccess设置，如果您安装在网站的根目录中，该设置可能应该有效。即使它对您来说并不完整，但这也是一个很好的起点。
| 归档时间： |
|
| 查看次数： |
2147 次 |
| 最近记录： |