Ionic 在Angular 项目中运行capacitor sync命令时如何使用不同的构建目标

k5ifujac  于 2023-06-20  发布在  Ionic
关注(0)|答案(1)|浏览(173)

我目前在我的Angular项目中使用Capacitor。到目前为止,我已经在angular.json文件中定义了几个构建目标(developmentstagingproduction),并使用ng build --configuration=<target_name>进行了不同配置的部署。
我想在Capacitor中实现相同的功能,这样我就可以根据目标进行不同的构建。我更新了我的环境文件如下:

export const environment = {
  target: 'development',
  // ...
}

并更新了capacitor.config.ts文件:

import { CapacitorConfig } from '@capacitor/cli';
import {environment} from "./src/environments/environment";

const config: CapacitorConfig = {
  webDir: `dist/${environment.target}`,
  // ...
}

然而,这总是导致webDir成为dist/development,因为我在更新电容器项目时找不到指定构建目标的方法。因此,使用的环境文件始终是environment.ts,而不是被environment.production.ts替换(假设我想为生产环境构建)。
目前,我使用以下步骤来构建我想要的目标:
1.要为所需目标生成版本,请执行以下操作:

npx ng build --configuration=<build_target>

1.手动更改capacitor.config.ts文件:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  webDir: 'dist/<build_target>',
  // ...
}

1.然后更新Capacitor项目:

npx cap sync ios
l7wslrjt

l7wslrjt1#

环境文件替换是一个Angular 的事情,只替换src文件夹内代码中的文件。
Capacitor是框架无关的,对替换一无所知,angular不会替换src文件夹之外的源代码文件(如capacitor.config.ts)。
所以你必须使用一种不涉及Angular 替换的不同方法,例如你可以这样做:

import { environment as devEnvironment } from './src/environments/environment';
import { environment as prodEnvironment } from './src/environments/environment.prod';

const environment = process.env.NODE_ENV === 'production' ? prodEnvironment : devEnvironment;

然后运行sync命令,如下所示NODE_ENV=production npx cap sync android

相关问题