【精】angular.json webpack，通过webpack实现切换环境配置，配置公共变量，配置快捷命令行【全备注详解】

川啊川啊

已于 2023-02-22 14:47:38 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： angular.js webpack 前端

于 2023-02-22 14:03:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44788344/article/details/129158718

本文介绍了如何在Angular项目中配置和切换不同的环境，包括开发环境和生产环境。主要步骤涉及创建环境配置文件，修改angular.json中的build和serve部分以指定不同环境的文件替换，以及在package.json中设置命令行快捷方式。此外，还提到了环境变量的命名规范和webpack的相关配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular.json webpack，通过webpack实现切换环境配置，配置公共变量，配置快捷命令行

配置不同环境（命名规则见附1）

1 新建切换环境配置文件夹
请添加图片描述

2 新建environment.ts 配置复制三份并重命名（环境公共变量也在此配置）


export const environment = {
   
   
  production: false,
  baseUrl: 'http://192.xxx.111.43:8080',//不同环境URL，不同文件填写不同参数
  useHash: false,
  xxxx:xxx,//公共变量配置，不同文件填写不同参数
};

3.打开 angular.json -> projects -> 项目名 -> architect -> build
配置基本webpack打包配置

"production": {
   
   //打包命令-–prod()的配置
	"defaultConfiguration": "prod"//配置默认打包“ng build”
	"configurations": {
   
   //代表这个命令的多种调用模式 
            "prod": {
   
   //执行ng build -c -prod 进行打包
              "fileReplacements": [//当前打包命令替换文件配置
                {
   
   
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "budgets": [
                {
   
   
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "10mb"
                },
                {
   
   
                  "type": "anyComponentStyle",
                  "maximumWarning": "100kb",
                  "maximumError": "100kb"
                }
              ],
              "outputHashing": "all"
            }
            //自定义配置 dev.....
            "dev": {
   
   执行ng build -c -dev 进行打包环境切换
              "fileReplacements": [
                {
   
   
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            },
        },