angular6根據(jù)environments配置文件更改開發(fā)所需要的環(huán)境的方法
前端開發(fā)過程中,我們常常需要根據(jù)需求去運(yùn)行或者打包不同環(huán)境的代碼,幸運(yùn)的是,angular給我們提供了environments配置,但是angular6.x的配置方式和angular的其他版本的配置方式是有所不同的,下面我就分別介紹在測(cè)試test、預(yù)生產(chǎn)pre環(huán)境下實(shí)現(xiàn)environments配置。
一、angular6.x下environments的配置
首先,在environments文件夾下創(chuàng)建environment.test.ts和environment.pre.ts文件,如下圖
然后分別在里面添加如下內(nèi)容
然后找到angular.json文件,在architect對(duì)象下的configurations下添加如下代碼:
然后在找到serve,添加如下的代碼
可以通過運(yùn)行ng serve --configuration=test或者ng serve -c test課件在控制臺(tái)打印:
{production: false, path: "https://test.webapi.sxmaps.com/"} path: "https://test.webapi.sxmaps.com/" production: false __proto__: Object
同理運(yùn)行ng serve --configuration=pre或者ng serve -c pre可獲取到預(yù)生產(chǎn)環(huán)境的域名,所以,你只需要在需要用到環(huán)境變量的地方引入即可,如
import {environment} from '../environments/environment';
二、angular其他版本environments的配置
同樣的,首先在environments創(chuàng)建environment.test.ts和environment.pre.ts,然后按照上文的步驟,在里面添加相同的內(nèi)容,然后去到angular-cli.json文件找到environments,在里面添加如何內(nèi)容:
然后通過運(yùn)行ng s --env=test就可以運(yùn)行測(cè)試環(huán)境了,在需要的地方引入environment即可。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法
Swiper是目前較為流行的移動(dòng)端觸摸滑動(dòng)插件,因?yàn)槠浜唵魏糜靡咨鲜?,受到很多前端開發(fā)者的歡迎。這篇文章主要介紹了AngularJS 中使用Swiper制作滾動(dòng)圖不能滑動(dòng)的解決方法,需要的朋友可以參考下2016-11-11詳解angular2.x創(chuàng)建項(xiàng)目入門指令
這篇文章主要介紹了詳解angular2.x創(chuàng)建項(xiàng)目入門指令,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐
本篇文章主要介紹了Angular實(shí)現(xiàn)圖片裁剪工具ngImgCrop實(shí)踐,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive,需要的朋友一起學(xué)習(xí)吧2016-04-04AngularJS中的路由使用及實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJS中的路由使用及實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10AngularJs實(shí)現(xiàn)ng1.3+表單驗(yàn)證
這篇文章主要介紹了AngularJs實(shí)現(xiàn)ng1.3+表單驗(yàn)證,感興趣的小伙伴們可以參考一下2015-12-12