Angular中environments的神奇之处

前言

在使用angular脚手架构建angular项目时,都会给我们生成一个名叫environments的文件夹。从字面意识理解像是环境变量的意思。

可以看见后缀不一样

有卵用

他们分别是每个环境对应的配置,执行不同的命令,就会调用不同的文件。

例如: 比如environment.prod.ts对应的就是prod环境,你有多少个环境这里就新建多少个文件。(当然没有的就是默认的运行环境)

只有这些文件并起不了作用。关键在这里

到angular-cli.json文件找到environments这个属性进行配置,比如

这才是起作用的地方

使用

奇怪它怎么知道是哪个文件呢?

本地调试的时候

ng s -e=prod

简单解释下, ng:angular脚手架提供的命令操作 s: serve 的简写,运行程序 -e=prod: -env=prod的简写,大概意思就是启用prod的运行环境配置,prod就是在上面json文件中配置的环境名。

发布的时候,当然用法也是一样,不过通常我们都是把ng命令封装在package.json文件中。如下:

简化了

我们使用 npm run start就等于使用了ng serve --port 4001 --open这个命令。

场景

在angular项目开发中,前后台分离,后台api地址生产环境,测试环境,开发环境的api地址可定都不会是同一个ip地址。这样通过environments来控制的话,就不担心在测试,生产,开发环境来回切换时去改配置文件了。

演示一下

默认环境

默认环境

  ng s 

打开浏览器查看

和配置的一样

其他环境

其他环境

ng s -e=dprod --hmr 

见证奇迹

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端vue

基于CodeIgniter&Vue-cli构建前后端分离

这是正常CI给的初始页面,CI让我们更改welcome_message文件更换视图,具体方法在controllers/welcome中,但是我们并不需要,因为视...

97930
来自专栏耕耘实录

PHP学习笔记(3)--Mysql部分简单命令

8320
来自专栏青青天空树

初识mfc

  今天主要了解了Visual C++的开发环境Visual Studio(话说以前都是用来调试控制台程序的)和用mfc写了一个最简单的程序。

14330
来自专栏沈唁志

Linux学习中常用操作命令

25350
来自专栏Web项目聚集地

Linux养成计划(四)

Linux系统会内建 vi 文本编辑器,Vim具有程序编程的能力,可以看作是Vi的增强版本,可以主动的以字体颜色辨别语法的正确性,方便程序设计、补充代码、编译及...

11210
来自专栏狂码一生

linux系统挂载磁盘、卸载磁盘、磁盘分区

一、挂载磁盘     1.查看磁盘列表、查看是否有硬盘未被挂载:     >fdisk -l ?     可以看到/dev/sdb硬盘没有被挂载。     2....

2K90
来自专栏Jerry的SAP技术分享

如何创建一个新浪微博应用以及获得Access token

打开网页http://open.weibo.com/wiki/%E9%A6%96%E9%A1%B5

17540
来自专栏IMWeb前端团队

Nodejs进阶:Express常用中间件body-parser实现解析

写在前面 body-parser是非常常用的一个express中间件,作用是对post请求的请求体进行解析。使用非常简单,以下两行代码已经覆盖了大部分的使用场景...

325100
来自专栏Ryan Miao

CentOS7下mysql5.6修改默认编码

参考原文教程:Centos7下修改mysql5.6编码方式 解决网站中文显示问号 解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所...

42360
来自专栏我是攻城师

elasticsearch里面bulk的用法

40670

扫码关注云+社区

领取腾讯云代金券