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

Question

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

Answer 1

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

首先安装包全局

npm install http-server -g

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

http-server dist/

并且如果您使用的是 Angular 6+ 或更高版本（使用 Angular 10），您必须运行

http-server dist/your-project-name

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

Answer 2

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)

Answer 3

在我的例子中，我接下来做了：

全局安装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 版本。

Answer 4

来自终端：
$ npm install http-server -g

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

尽情享受吧！

Answer 5

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

因为 Angular 7 你可以做到 ng serve --prod=true。文档：https://angular.io/cli/serve

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

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

How to run the Dist Folder on Local Machine in Angular 6+?

typescript

angular

angular6

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

How to run the Dist Folder on Local Machine in Angular 6+?

typescript

angular

angular6

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