开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在ng构建之后如何运行index.html文件--prod

在ng构建之后，可以通过以下步骤来运行index.html文件--prod：

首先，确保你已经成功构建了Angular项目。在终端或命令行中，进入项目的根目录。
使用任意一个静态文件服务器来运行index.html文件。静态文件服务器可以将项目文件提供给浏览器进行访问。以下是几个常用的静态文件服务器：
- http-server：一个简单的命令行工具，可以通过npm全局安装。安装完成后，在终端中运行以下命令：
- http-server：一个简单的命令行工具，可以通过npm全局安装。安装完成后，在终端中运行以下命令：
- 然后，在项目根目录中运行以下命令：
- 然后，在项目根目录中运行以下命令：
- 这将在8080端口上启动一个静态文件服务器，并将项目文件提供给浏览器访问。
- Python SimpleHTTPServer：如果你已经安装了Python，可以使用Python的内置模块来启动一个简单的静态文件服务器。在终端中运行以下命令：
- Python SimpleHTTPServer：如果你已经安装了Python，可以使用Python的内置模块来启动一个简单的静态文件服务器。在终端中运行以下命令：
- 这将在8080端口上启动一个静态文件服务器，并将当前目录作为根目录提供给浏览器访问。
- Nginx：如果你熟悉Nginx的配置和使用，可以配置一个Nginx服务器来提供静态文件访问。具体配置方法请参考Nginx的官方文档。

打开浏览器，并在地址栏中输入http://localhost:8080（或者你选择的端口号）。这将访问静态文件服务器，并加载index.html文件。

请注意，以上步骤仅适用于生产环境构建（--prod）。在开发环境中，可以直接使用ng serve命令来运行Angular项目，并自动打开浏览器访问。

相关搜索:在gatsby-cli构建之后没有index.html文件？在运行ng build --prod之后，Git没有任何要提交的内容在ng构建之后，组件样式会去哪里？在构建之后运行命令/脚本在ng build prod之后，我不能使用我的rest api angular http请求在使用ng build --prod构建时从不返回数据 Angular 9-在构建之后，始终在index.html中的styles.css路径前面添加一个"/“-prod 在ng服务与ng构建之后，包的大小是ng的2-3倍在构建作业jenkins之后运行CURL脚本 Angular 7:在ng构建中用index.aspx代替index.html Quarkus:如何仅为非PROD配置文件运行StartupEvent？在Buddybuild之后如何构建Android应用？如何命名index.html中包含的构建文件无法运行npm在使用npm run build:prod构建angular app后运行服务器如何避免生成多个构建文件- angular 9- ng构建如何用.htaccess让网站运行Index.html文件？在通过运行Exec任务构建jar之后，使用graalvm在gradle中构建本机映像如何知道Google Cloud function是在dev中运行还是在prod中运行？在使用angular-cli@1.0.0-beta.21执行ng构建-prod时找不到模块css-loader 如何在自定义目标之后运行构建后事件？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

一. angular-cli.json常见配置 { "project": { "name": "ng-admin", //项目名称 "ejected": false // 标记该应用是否已经执行过eject命令把webpack配置释放出来 }, "apps": [ { "root": "src", // 源码根目录 "outDir": "dist", // 编译后的输出目录，默认是dist/ "assets": [ // 记录资源文件夹

03

Angular CLI 简介

如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文.

使用Angular CLI进行Build (构建) 和 Serve

Build. Build主要会做以下动作: 编译项目文件并输出到某个目录 Build targets决定了输出的结果 bundling 打包生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉) ng build. 可以先看帮助: ng build --help 针对开发环境, 就是用命令 ng build. 默认情况下, 它的输出目录在.angular-cli.json文件里ourDir属性配置的, 默认是/dist目录. build之后会看见dist里面有这些文件: i

07

Angular开发实践（六）：服务端渲染

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案，它就是 Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。标准的 Angular 应用会执行在浏览器中，它会在 DOM 中渲染页面，以响应用户的操作。而 Angular Universal 会在服务端通过一个被称为服务端渲染（server-side rendering - SSR）的过程生成静态的应用页面。它可以生成这些页面，并在浏览器请求时直接用它们给出响应。它

Angular2打包遇到的问题与解决方法(二）

http://www.jianshu.com/p/8943ff86349a 之前这篇是说了路径的问题这次是说准备部署时的打包首先还是基于这个 ng build --base-href /test/dist/ 但这样打包出来的代码非常大，所以需要生产环境的打包 ng build --prod --base-href /test/dist/ --save 或者 ng build --prod --no-extract-license --base-href /test/dist/ --save 不过这样打包可能会报错，这是因为生产环境的打包检查代码会按照严格模式，一些public写成private的问题开发时不会报错，但生产环境下打包就会报错。还有类似item.a.b这种如果a是后来才创建的，也会报错，改成item.a['b']这种方式就可以解决。这些报错我的解决方式就是一个个对着去改，不知道还有没有什么更好的方法。还有如果想用cdn的方式引用外部代码，可以直接在index.html的头部写

00

Vue.js CLI4 Vue.config.js标准配置（最全注释）

Vue.js CLI工具不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。

02

深入了解Webpack 5

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev Server。您可以更改源代码，Webpack再次将其捆绑，Webpack Dev Server会在浏览器中向您显示最新的开发版本。

03

Webpack 详解

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev

02

Angular2学习笔记

阴差阳错，当初在选择写网站的时候选择了使用Angular2+RESTfulｌ，现在想起来，这个选择可能有点轻率了。虽然这套框架我个人觉得可能的确比较适合做移动端Web的开发，但是由于网站开发的经验明显不足，加上这套技术还不是相当的成熟，在学习的过程中走了很多的弯路。而且，功利一点的讲，对于找工作的帮助可能并不是很大，很多Web相关的职务招的都是Java方向的，而我直接跳过这种传统框架直接接触新知识难免会发现基础不牢的情况。不过还好，经过这一段时间的倒腾，好歹把Angular2的东西稍微消化了一点，相比啥都不会，也算是有点收获吧。

01

深入了解Webpack

本质上，有两种构建JavaScript应用程序的模式：开发和生产。以前，您已使用开发模式在本地开发环境中开始使用Webpack Dev

07

Docker+Nginx打包部署前后端分离项目

最近做了一个前后端分离的通用权限管理系统，今天想用自己的服务器部署下，本地部署测试是没问题的，但是部署在服务器上还是出现了许多小插曲，这里大概记录一下吧。

05

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）

上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架，注意我们的前端代码的编写全部都是在VS Code上面编写。

02

Rainbond 中Vue、React项目如何调用后端接口

通常我们会在项目的全局配置文件.env.production中直接写入后端ip，例如：

04

Vue+ElementUI项目使用webpack输出MPA

为另一个项目提供可嵌入的功能单页，大部分页面使用时都是独立功能页，个别页面带有左侧边栏（相当于3-4个页面的整合形态），由于资源定位地址的限定，每个页面打包为单页后，入口html文件需要定制命名，且脚本和样式文件需要放在指定的路径下，公共资源地址也必须替换成特殊字符以适配母系统的调用逻辑（比如下面结构中应用jquery.min.js的路径可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假设原工程中拥有AB这2个旧页面，现在需要开发CDE这3个页面，目录结构要求如下：

02

发布 Angular 应用至生产环境

两年前，写过一篇使用 rollup 来为生产环境编译 Angular 2 应用的文章，因为当时还没有 angular-cli 项目。而如今 Angular 已经到了 7.x 版本，对应的工具也是非常的完善，也就不在使用 rollup 来处理 angular 项目。

05

想要成为前端Star 吗？一首歌时间将React / Vue 应用Docker 化

应用部署从刀耕火种，到DevOps崛起，原来不止前端在迅捷发展。接下来，我将用一首歌的时间，带大家真实的体验一番Docker容器化。

02

新手入门系列之-React / Vue 应用持续集成Docker 化

应用部署从刀耕火种，到DevOps崛起，原来不止前端在迅捷发展。接下来，我将用一首歌的时间，带大家真实的体验一番Docker容器化。

02

docker学习系列19 容器化Angular项目

请留意下匿名卷/usr/src/app/node_modules。该目录是在docker build构建阶段创建的，在Run启动阶段需要手动挂载该目录。

06

Angular10配置webpack打包「详细教程」

对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。对许多项目的常见依赖项是日期库moment.js 。这包括使用语言环境的功能，但是，它大大增加了整体捆绑软件的大小。这些都是需要我们优化的地方。

02

Angular 实现类似微服务的效果

01

Spring国际认证指南|了解如何使用 AngularJS 检索网页数据

本指南将引导您编写一个使用基于 Spring MVC 的RESTful Web 服务的简单 AngularJS 客户端。

03

想要成为前端Star 吗？一首歌时间将React/Vue 应用Docker 化

应用部署从刀耕火种，到DevOps崛起，原来不止前端在迅捷发展。接下来，我将用一首歌的时间，带大家真实的体验一番Docker容器化。

05

40·灵魂前端工程师养成-前端框架webpack

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

01

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化，由于不想写蹩脚的SSR代码，所以准备采用预渲染，本来想着网上有这么多预渲染的文章，随便找个来跟着做不就完了嘛，结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T

02

Angular 项目路径添加指定的访问前缀

开发多个项目的时候，我们希望能通过指定的前缀路径去访问不同的项目。比如，通过前缀 /projectA/ 去访问项目 A；通过前缀 /projectB/ 去访问项目 B。我们应该怎么设置呢？

02

5-10~11 webpack 性能优化（2）

然后我们修改一下 home.jsx 代码，增加一个三方库，lodash。我们装一下 lodash 然后引入：

01

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

现在我们可以app.component.html用这个替换：Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写，以及各种改进，包括优化构建和更快的编译时间。在这个Angular 5教程中，我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5，本教程适合您。

01

Week31-脚手架发布模块云发布功能开发

4-3 服务端缓存文件清除功能实现本节主要是对redis以及缓存文件进行清除,并在build结束后，断开链接

03

Webpack4 搭建 Vue 项目

由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。

01

[翻译]Ext JS 教程-开始使用 ExtJS 4

入门

1. 需求

1.1 网页浏览器

ExtJS 4 支持所有主流的浏览器，从IE 6 到最新的谷歌Chrome。在开发期间，我们建议你使用下面这些浏览器，以获得更好的调试体验。

Ø Google Chrome 10+

Ø Apple Safari 5+

Ø Mozilla Firefox 4+ 带Firebug Web 开发插件

本教程假设你正在使用最新的谷歌 Chrome 浏览器。如果你还没有 Chrome，花点时间去下载它吧，然后去熟悉熟悉 Chrome 的开发者工具。

1.2 Web 服务器

尽管使用 ExtJS 4 并不一定需要一个本地的web 服务器，仍然强烈建议你在开发的时候能有一个，因为 XHR 在大多数浏览器上有针对本地 file:// 的cross origin 限制。如果你还没有本地的web 服务器，建议你下载并安装 Apache HTTP Server。

Ø 了解在 Windows 上面安装 Apache

Ø 了解在 Linux 上面安装 Apache

Ø Mac OS X 已经内置了apache，你可以在 System Preference > Sharing 下面的 Web Sharing 旁找到

一旦你安装好了 Apache ，你可以通过在浏览器地址栏输入 localhost 验证它是否在运行。你会看到一个表示 Apache HTTP 服务器已经成功安装并且正常运行的开始页面。

1.3 Ext JS 4 SDK

下载 Ext JS 4 SDK，把压缩包解压到一个在你的web 根路径下新建的extjs文件夹。如果你不知道web根目录在哪儿，查阅你web服务器的相关文档。Web 根路径的位置根据你操作系统的不同而有所不同，但是如果你使用的是 Apache，你一般会在：

Ø Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"

Ø Linux - "/var/www/"

Ø Mac OS X - "/Library/WebServer/Documents/"

一旦你已经完成安装，将浏览器导航至 http://localhost/extjs/index.html 。如果一个 ExtJS 4 的欢迎页面出现了，代表你已经一切就绪了。

2. 应用程序结构

2.1 基本结构

如下所列的建议尽管不是强制的，但是可以作为最佳实践指南考虑，以保持你的应用的结构条理性、可扩展性和可维护性。下面是推荐的Ext JS 应用程序结构：

- appname

- app

- namespace

- Class1.js

- Class2.js

- ...

- extjs

- resources

- css

- images

- ...

- app.js
04

【webpack】从vue-cli 2x 到 3x 迁移与实践

左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了webpack配置

03

从零开始学VUE之Webpack(搭建本地服务器并分离开发和生产配置)

dev对应的就是我们服务启动的命令,配置完成后我们就可以通过npm run dev来启动了

02

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

想来想去，概念这些东西不怎么想讲，更多的是想讲点实战性的内容。所以有些东西跳过去了，小伙伴们请去看官方文档哈；跳跃性的前进，写的不好多包涵。。。

02

html的base标签为什么不起作用

我今天尝试编译一个Angular4的应用，并部署到服务器的一个路径上去，由于不是根路径因此我使用了下面的语句： ng build -prod -bh /rel 自然的Angular应用index.html里的语句就变成了： <base href="/rel"> 但，当我用http://localhost:8080/rel打开网页时却提示Loading...，打开调试发现js路径没找到，base标签没有生效，上网自学一番收获如下： https://stackoverflow.com/questions/115

02

Angular-Cli脚手架介绍、安装并搭建项目

最简单的使用方式参照以下 StackBlitz 演示，也推荐 Fork 本例来进行 Bug Report，注意不要在实际项目中这样使用。

03

Vue笔记(8)

后续项目中,我们会使用Vuejs进行开发,而且会以特殊的文件来组织Vue的组件

02

docker学习系列5 nginx 容器

docker run 其实等于 docker create + start 因为tag为 1.15 的 nginx 镜像并不在本地，会先下载再运行

02

详解 Vue 目录及配置文件之 config 目录

1.1 项目目录介绍目录/文件说明详解 build 项目构建(webpack)相关代码详解 config 配置目录，包括端口号等详解 node_modules npm 加载的项目依赖模块详

02

《Vue3.0抢先学》系列之：一个简单的例子

书接上文：你被我撩拨了一下，从Github上下载了Vue3.0的源码。然后呢，你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢？

02

25个超有用的 AngularJS Web 开发工具

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，改善了JavaScript。

05

Angular2入门体验

好的工具往往使得开发应用更快更简单，而不是任何模块都手动开发。angualr cli就是一个支持创建工程，添加文件，对各种任务如测试、打包、部署等迭代。本文的目的就是基于TypeScript开发构建一个angualr应用，使用angualr cli可以选择工程的风格。在本章的末尾，你可以理解CLI的开发以及开发完整应用的样例。也可以通过这个链接直接下载源码。第一步，配置环境变量在开始开发前，需要安装nodejs。点击这个网址,Nodejs安装文件下载在命令行中，执行： sudo npm i

06

12. Vue搭建本地服务

本地服务可以提高开发效率. webpack不需要每次都打包, 就可以看到修改后的效果. 本地服务器基于node.js搭建, 内部使用二十express框架. 可以实现让浏览器自动刷新的功能.

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭