modify build and serve console output

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

@@ -10,7 +10,8 @@ import { BrowserBuilderSchema } from './schema';
 import {
   getNormalizedAssetPatterns,
   getProjectRoot,
-  getProjectSourceRoot
+  getProjectSourceRoot,
+  modifyChalkOutput
 } from '../../utils';
 import {
   addFileReplacements,
@@ -75,6 +76,20 @@ export function runBuilder(
     };
   }
 
+  // The compiled files output by vue-cli are not relative to the
+  // root of the workspace. We can spy on chalk to intercept the
+  // console output and tranform any non-relative file paths.
+  // TODO: Find a better way to rewrite vue-cli console output
+  const chalkTransform = (arg: string) => {
+    const normalizedArg = normalize(arg);
+    return normalizedArg.includes(options.outputPath)
+      ? options.outputPath + normalizedArg.split(options.outputPath)[1]
+      : arg;
+  };
+  ['green', 'cyan', 'blue'].forEach(color =>
+    modifyChalkOutput(color, chalkTransform)
+  );
+
   return from(setup()).pipe(
     switchMap(({ projectRoot, inlineOptions }) => {
       const service = new Service(projectRoot, {

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

@@ -10,14 +10,16 @@ import {
   JsonObject,
   normalize
 } from '@angular-devkit/core';
+import { cliCommand } from '@nrwl/workspace/src/core/file-utils';
 import { from, Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { DevServerBuilderSchema } from './schema';
 import { BrowserBuilderSchema } from '../browser/schema';
 import {
   getNormalizedAssetPatterns,
   getProjectRoot,
-  getProjectSourceRoot
+  getProjectSourceRoot,
+  modifyChalkOutput
 } from '../../utils';
 import {
   addFileReplacements,
@@ -115,6 +117,21 @@ export function runBuilder(
     };
   }
 
+  // The vue-cli build command is not suitable for an nx project.
+  // We spy on chalk to intercept the console output and replace
+  // it with a nx command.
+  // TODO: Find a better way to rewrite vue-cli console output
+  const buildRegex = /([p]?npm run|yarn) build/;
+  modifyChalkOutput('cyan', arg => {
+    if (buildRegex.test(arg)) {
+      return arg.replace(
+        buildRegex,
+        `${cliCommand()} build ${context.target.project} --prod`
+      );
+    }
+    return arg;
+  });
+
   return from(setup()).pipe(
     switchMap(({ projectRoot, browserOptions, inlineOptions }) => {
       const service = new Service(projectRoot, {

libs/vue/src/utils.ts

@@ -4,6 +4,9 @@ import { normalize, resolve, virtualFs } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import { BrowserBuilderSchema } from './builders/browser/schema';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { chalk } = require('@vue/cli-shared-utils');
+
 export async function getProjectRoot(context: BuilderContext): Promise<string> {
   const projectMetadata = await context.getProjectMetadata(
     context.target.project
@@ -43,3 +46,18 @@ export function getNormalizedAssetPatterns(
     projectSourceRoot === undefined ? undefined : normalize(projectSourceRoot)
   );
 }
+
+export function modifyChalkOutput(
+  method: string,
+  transform: (arg: string) => string
+) {
+  const originalChalkFn = chalk[method];
+  Object.defineProperty(chalk, method, {
+    get() {
+      const newChalkFn = (...args: string[]) =>
+        originalChalkFn(...args.map(transform));
+      Object.setPrototypeOf(newChalkFn, originalChalkFn);
+      return newChalkFn;
+    }
+  });
+}