以下是一个示例的解决方法,用于在部署期间配置Angular应用程序的生产环境变量:
environment.prod.ts
的配置文件,位于src/environments/
目录下。这个文件将包含生产环境下的变量值。export const environment = {
production: true,
apiUrl: 'https://api.example.com',
apiKey: 'your-api-key'
};
angular.json
文件,找到你的应用程序的配置。"projects": {
"your-app": {
"architect": {
"build": {
"configurations": {
"production": {
// 添加其他配置项...
}
}
}
}
}
}
production
配置项下,找到fileReplacements
节点,并确保replace
属性的值是src/environments/environment.ts
。"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
production
配置项下,找到assets
节点,并确保src/assets
目录被添加到input
属性的数组中。"assets": [
"src/favicon.ico",
"src/assets"
]
production
配置项下,找到styles
节点,并确保你的样式文件被添加到input
属性的数组中。"styles": [
"src/styles.css",
// 添加其他样式文件...
]
production
配置项下,找到scripts
节点,并确保你的脚本文件被添加到input
属性的数组中。"scripts": [
// 添加其他脚本文件...
]
architect > build > options
节点,并确保outputPath
属性的值是你想要部署的目录路径。例如,如果你想要部署到dist/production
目录下,可以将outputPath
设置为dist/production
。"options": {
"outputPath": "dist/production",
// 其他选项...
}
ng build --configuration=production
通过这些步骤,你可以在构建生产环境应用程序时使用正确的环境变量配置,并确保敏感信息和与生产环境相关的变量得到了正确的保护和使用。