项目多环境配置
- 方案一:利用angular cli 打包时处理,不同的环境打出不同的包文件
- 方案二:外置配置文件,方便线上修改,不需要每次修改都打包文件
方案一:开发时配置
angular cli 创建项目后会自动生成两个环境配置文件:
src/environments目录下会生成两个环境配置文件
#environment.ts 代表开发时使用的环境
默认内容如下
export const environment = {
production: false,
};
#environment.prod.ts 代表产品上线时使用的环境
默认内容如下
export const environment = {
production: false,
};
原理是,cli build或者server时
,根据名词参数--env=环境配置文件简称
切换配置文件
而环境配置文件的简称在.angular-cli.json
文件中声明,具体如下
如果你想增加其他环境配置,只需修改这里即可。
如何使用
修改下配置文件,然后看使用效果
修改environment.ts
export const environment = {
production: false,
testurl:"我是开发环境"
};
修改environment.prod.ts
export const environment = {
production: true,
testurl:"我是生成环境"
};
# 然后在根组件app.component.ts中引用一下环境配置文件
1. 导入环境
import {environment} from "../environments/environment";
2. 然后调用
ngOnInit() {
alert(JSON.stringify(environment));
}
运行命令
ng serve 页面会弹出 {production: true, testurl:"我是生成环境"}
ng serve --env=prod 页面会弹出 {production: true, testurl:"我是产品环境"}
3. 这里注意有个默认值,cli命令的默认值是 dev ,代码中默认使用 imporet的文件,
你会发现我们import的是environment.dev,但是这里import什么版本其实不重要,
因为@Angular/cli会在编译时根据你给的--env参数自己动态替换。
当然,如果你不给--env参数,它就默认使用这里import的版本了
方案二:线上可配置
有时候build大包好了代码,放到服务器上,当服务器ip变更后,只要简单修改配置文件,便可完成环境配置。
在 src/assets
文件增加一个配置文件,比如conf.json,把所有的配置写到这个文件,然后在页面使用时,动态加载这个文件。
-- 示例代码
this.httpClient.get('/conf.json').subscribe(data=>{
//todo 拿到了配置文件
});
下次需要修改文件,服务器上改conf.json即可。
网友评论