如何在 Angular 6+ 的本地机器上运行 Dist 文件夹？

Posted 2023-03-13

【中文标题】如何在 Angular 6+ 的本地机器上运行 Dist 文件夹？

【英文标题】：How to run the Dist Folder on Local Machine in Angular 6+?

【发布时间】：2018-12-10 06:16:18

【问题描述】：

我正在Angular6+ 中构建应用程序，现在我运行了命令ng build --prod，它给了我一个dist 文件夹。如何在 Localhost 上检查或提供该文件夹？

【问题讨论】：

一般情况下，您可以在本地安装任何 HTTP 服务器来为您的项目分发文件提供服务，例如 [XAMP, npm package "http-server", ....]

【参考方案1】：

编辑：Angular 12+：ng serve --configuration production

从 Angular 7 开始，您只需执行 ng serve --prod=true。文档：https://angular.io/cli/serve

我知道这个问题是关于 Angular 6 的，但 Google 把我带到了这里，所以仅供将来参考。

【参考方案2】：

您可以使用http-server 包来做到这一点。

首先安装包全局

npm install http-server -g

然后在你的项目目录中（在终端中）运行

http-server dist/

如果你使用 Angular 6+ 或更高版本（Working with Angular 10），你必须运行

http-server dist/your-project-name

现在您可以访问http://localhost:8080 查看您的申请

【讨论】：

让我试试看一下

如果您安装了npm > 5.2，那么您可以在没有全局安装的情况下使用npx 执行与上述相同的操作。例如。 npx http-server dist/。这将在您每次执行时下载并运行二进制文件，因此对于一次性或不经常使用它非常好。如果您经常使用该软件包或需要离线，请按照答案中的步骤操作。

导航到路线后重新加载浏览器时它不起作用。有什么建议吗？

当我尝试在 192.168.2.36:8080 或 localhost:8080 端口中运行时，我在我的应用程序中使用 angular 7.xx 应用程序未运行。它显示“此页面无法正常工作......”。如果您有任何建议，请告诉我。提前致谢

@Santhosh 的同样问题，http-server 提供了一系列地址可以找到应用程序，但它们都不起作用......

【参考方案3】：

从终端： $ npm install http-server -g

来自 Angular 项目目录。假设您的 Angular 项目名称是 ngx。 $ ng 构建 $ http-server dist/ngx 启动 http-server，服务 dist/ngx 适用于：http://127.0.0.1:8080 http://192.168.43.54:8080 按 CTRL-C 停止服务器

享受吧！

【参考方案4】：

在我的情况下，我做了下一步：

全局安装http-server

npm install http-server -g

然后在项目目录中（在终端中），我运行

http-server dist/[your-project-name]

现在您可以访问http://localhost:8080/index.html 查看您的申请。 但是当我重新启动浏览器页面时，我必须再次将 /index.html 添加到 URL 中。

---

它适用于 Angular 7.x.x 版本。

【参考方案5】：

windows平台

 - Install wamp server --> 
   https://wampserver.en.softonic.com/ and start.
 - your dist folder files copy to c:/wamp/www/(your project name)/
 - And create .htaccess file redirect your index.html.
   (http://www.htaccesstools.com/htaccess-faq/)
 - Next run browser http://localhost/(your project name)

ubuntu 平台

 - Install lamp server --> 
   https://www.linode.com/docs/web-servers/lamp/install-lamp-stack-on-ubuntu-16-04/ and start.
 - your dist folder files copy to /opt/lampp/htdocs/(your project name)/
 - And create .htaccess file redirect your index.html.
   (http://www.htaccesstools.com/htaccess-faq/)
 - Next run browser http://localhost/(your project name)