资讯专栏INFORMATION COLUMN

angular6根据environments配置文件更改开发所需要的环境

seasonley / 613人阅读

摘要:前端开发过程中,我们常常需要根据需求去运行或者打包不同环境的代码,幸运的是,给我们提供了配置,但是的配置方式和的其他版本的配置方式是有所不同的,下面我就分别介绍在测试预生产环境下实现配置。

前端开发过程中,我们常常需要根据需求去运行或者打包不同环境的代码,幸运的是,angular给我们提供了environments配置,但是angular6.x的配置方式和angular的其他版本的配置方式是有所不同的,下面我就分别介绍在测试test、预生产pre环境下实现environments配置。

一、angular6.x下environments的配置

首先,在environments文件夹下创建environment.test.ts和environment.pre.ts文件,如下图

然后分别在里面添加如下内容

然后找到angular.json文件,在architect对象下的configurations下添加如下代码:

然后在找到serve,添加如下的代码

可以通过运行ng serve --configuration=test或者ng serve -c test课件在控制台打印:

    {production: false, path: "xxxxx"}
        path: "xxxxxx"
        production: false
    __proto__: Object

同理运行ng serve --configuration=pre或者ng serve -c pre可获取到预生产环境的域名,所以,你只需要在需要用到环境变量的地方引入即可,如

import {environment} from "../environments/environment";

二、angular其他版本environments的配置

同样的,首先在environments创建environment.test.ts和environment.pre.ts,然后按照上文的步骤,在里面添加相同的内容,然后去到angular-cli.json文件找到environments,在里面添加如何内容:


然后通过运行ng s --env=test就可以运行测试环境了,在需要的地方引入environment即可。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102399.html

相关文章

  • Angular6+ webpack自定义扩展

    摘要:自定义扩展背景在项目开发过程中,发现生产模式下日志文件依然存在,通过百度得出的结果是在生产模式下一系列方法全部重写这种方法表示一看就不舒服,无法接受。接下来教大家如何使用,具体详情可以去上找文档。 Angular6+ webpack自定义扩展 背景 在项目开发过程中,发现生产模式下console.log()日志文件依然存在,通过百度得出的结果是在生产模式下console.xx一系列方法...

    xorpay 评论0 收藏0
  • 用WijmoJS玩转您Web应用 —— Angular6

    摘要:除在全球率先支持外,现已全面应用于等主流框架中。本文中,我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来,我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用 为什么选择WijmoJS? 作为一款纯前端控件集,WijmoJS秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在...

    hedge_hog 评论0 收藏0
  • 用WijmoJS玩转您Web应用 —— Angular6

    摘要:除在全球率先支持外,现已全面应用于等主流框架中。本文中,我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来,我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用 为什么选择WijmoJS? 作为一款纯前端控件集,WijmoJS秉承快如闪电,触控优先的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在...

    Ku_Andrew 评论0 收藏0
  • 问道Angular——Angular5/6/7项目添加热更新(HMR)功能

    摘要:提供以上热更新功能使用初始化项目命令行进入该目录启动项目将附带功能。   提供angular6以上HMR(热更新)功能 使用hmr-cli npm i -g hmr-cli   初始化angular项目,命令行进入该目录 hmr init   npm run hmr启动项目将附带hmr功能。 详细配置如下: Angular6添加HMR environments目录 environme...

    Aceyclee 评论0 收藏0
  • 用Docker搭建Laravel和Vue项目开发环境

    摘要:第二步添加在项目中创建文件。项目是官方的开源项目,负责实现对容器集群的快速编排。在这里我们会用到四个容器分别将放在四个不同的容器中,通过将四个应用容器关联到一起组成项目。服务服务的容器将执行我们项目中的代码。 showImg(https://segmentfault.com/img/bVbpfM5?w=695&h=270);在这篇文章中我们将通过Docker在个人本地电脑上构建一个快速...

    starsfun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<