add file replacement support for vue

libs/vue-plugin/src/builders/browser/builder.ts

@@ -16,6 +16,7 @@ import { map, switchMap } from 'rxjs/operators';
 import { BrowserBuilderSchema } from './schema';
 import { getProjectRoot, getProjectSourceRoot } from '../../utils';
 import {
+  addFileReplacements,
   modifyCachePaths,
   modifyCopyAssets,
   modifyEntryPoint,
@@ -66,6 +67,7 @@ export function runBuilder(
         modifyTsConfigPaths(config, options, context);
         modifyCachePaths(config, context);
         modifyCopyAssets(config, options, context, normalizedAssetPatterns);
+        addFileReplacements(config, options, context);
       },
       // This option is used instead of `dest` because Vue CLI will
       // overwrite our modified `CopyWebpackPlugin` config when `dest`

libs/vue-plugin/src/builders/browser/schema.d.ts

@@ -14,6 +14,7 @@ export interface BrowserBuilderSchema extends JsonObject {
   main: string;
   tsConfig: string;
   assets: Array<string | AssetPattern>;
+  fileReplacements: FileReplacementPattern[]
 }
 
 interface AssetPattern {
@@ -22,3 +23,8 @@ interface AssetPattern {
   ignore?: string[];
   output: string;
 }
+
+interface FileReplacementPattern {
+  replace: string;
+  with: string;
+}

libs/vue-plugin/src/builders/browser/schema.json

@@ -68,6 +68,24 @@
       "items": {
         "$ref": "#/definitions/assetPattern"
       }
+    },
+    "fileReplacements": {
+      "description": "Replace files with other files in the build.",
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "replace": {
+            "type": "string"
+          },
+          "with": {
+            "type": "string"
+          }
+        },
+        "additionalProperties": false,
+        "required": ["replace", "with"]
+      },
+      "default": []
     }
   },
   "required": [],

libs/vue-plugin/src/builders/dev-server/builder.ts

@@ -11,6 +11,7 @@ import { DevServerBuilderSchema } from './schema';
 import { BrowserBuilderSchema } from '../browser/schema';
 import { getProjectRoot } from '../../utils';
 import {
+  addFileReplacements,
   modifyCachePaths,
   modifyEntryPoint,
   modifyIndexHtmlPath,
@@ -54,6 +55,7 @@ export function runBuilder(
         modifyEntryPoint(config, browserOptions, context);
         modifyTsConfigPaths(config, browserOptions, context);
         modifyCachePaths(config, context);
+        addFileReplacements(config, browserOptions, context);
       }
     };
 

libs/vue-plugin/src/schematics/application/files/src/environments/environment.prod.ts.template

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

libs/vue-plugin/src/schematics/application/files/src/environments/environment.ts.template

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false
+};

libs/vue-plugin/src/schematics/application/schematic.spec.ts

@@ -46,6 +46,12 @@ describe('application schematic', () => {
       assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets']
     });
     expect(build.configurations.production).toEqual({
+      fileReplacements: [
+        {
+          replace: 'apps/my-app/src/environments/environment.ts',
+          with: 'apps/my-app/src/environments/environment.prod.ts'
+        }
+      ],
       mode: 'production'
     });
     expect(serve.builder).toBe('@nx-plus/vue-plugin:dev-server');
@@ -77,6 +83,8 @@ describe('application schematic', () => {
       'apps/my-app/src/index.html',
       'apps/my-app/src/assets/logo.png',
       'apps/my-app/src/assets/.gitkeep',
+      'apps/my-app/src/environments/environment.ts',
+      'apps/my-app/src/environments/environment.prod.ts',
       'apps/my-app/src/app/app.vue',
       'apps/my-app/src/app/app.spec.ts'
     ].forEach(path => expect(tree.exists(path)).toBeTruthy());
@@ -287,6 +295,12 @@ describe('application schematic', () => {
           'apps/subdir/my-app/src/assets'
         ]
       });
+      expect(build.configurations.production.fileReplacements).toEqual([
+        {
+          replace: 'apps/subdir/my-app/src/environments/environment.ts',
+          with: 'apps/subdir/my-app/src/environments/environment.prod.ts'
+        }
+      ]);
       expect(serve.options).toEqual({
         buildTarget: 'subdir-my-app:build'
       });
@@ -311,6 +325,8 @@ describe('application schematic', () => {
         'apps/subdir/my-app/src/index.html',
         'apps/subdir/my-app/src/assets/logo.png',
         'apps/subdir/my-app/src/assets/.gitkeep',
+        'apps/subdir/my-app/src/environments/environment.ts',
+        'apps/subdir/my-app/src/environments/environment.prod.ts',
         'apps/subdir/my-app/src/app/app.vue',
         'apps/subdir/my-app/src/app/app.spec.ts'
       ].forEach(path => expect(tree.exists(path)).toBeTruthy());

libs/vue-plugin/src/schematics/application/schematic.ts

@@ -206,6 +206,12 @@ export default function(options: ApplicationSchematicSchema): Rule {
         },
         configurations: {
           production: {
+            fileReplacements: [
+              {
+                replace: `${normalizedOptions.projectRoot}/src/environments/environment.ts`,
+                with: `${normalizedOptions.projectRoot}/src/environments/environment.prod.ts`
+              }
+            ],
             mode: 'production'
           }
         }

libs/vue-plugin/src/webpack.ts

@@ -128,3 +128,16 @@ export function modifyCopyAssets(
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     .use(require('copy-webpack-plugin'), [transformedAssetPatterns]);
 }
+
+export function addFileReplacements(
+  config,
+  options: BrowserBuilderSchema,
+  context: BuilderContext
+) {
+  for (const pattern of options.fileReplacements) {
+    config.resolve.alias.set(
+      getSystemPath(join(normalize(context.workspaceRoot), pattern.replace)),
+      getSystemPath(join(normalize(context.workspaceRoot), pattern.with))
+    );
+  }
+}