bug: build flags not passed to vue-cli-service

[liamdebeasi]

Description:

Custom build flags are not being passed to vue-cli-service preventing users from making development builds.

Steps to Reproduce:

1. ionic start --type=vue. Any template is fine.
2. Run ionic build -- --mode development. Notice that it still says "Building for production..."
   I would expect that the mode flag gets passed so that vue-cli-service builds for development.

Note: The following command works as expected: npm run build -- --mode development

My ionic info:

Ionic:

   Ionic CLI       : 6.12.4 (/Users/liamdebeasi/.nvm/versions/node/v15.0.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.6.0-dev.202102092029.cc5c8c6

Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.3.0) : 1.2.2

System:

   NodeJS : v15.0.1 (/Users/liamdebeasi/.nvm/versions/node/v15.0.1/bin/node)
   npm    : 7.0.7
   OS     : macOS Big Sur

[Tommertom]

Related to #3769 (comment) ?

As --hmr flag is also not passed on? (even though Angular)

[sniii]

I second OP, there is definitely an issue with the Ionic CLI and vue-cli-service, I also posted a question on this on the Ionic forums: https://forum.ionicframework.com/t/ionic-cli-build-parameters-issue-with-vue/205923

It affects all commands that ultimately make use of the vue-cli-service underneath. A good example is the capacitor commands.
Case in point, I want to build an iOS native app version of the project, and run it using our mocked backend data setup, by pointing to our "sandbox" environment variables (file: ".env.sandbox").

So instead of just using this appropriate command:
ionic capacitor run ios --mode=sandbox

----------->

I now have to manually build the project without using Ionic build:
npx vue-cli-service build --mode=sandbox

Then I have to copy webassets to the native project, and remember to not build the app:
ionic capacitor copy ios --no-build

Then finally I can open the XCode project and set about running the app in an emulator or whatever:
ionic capacitor open ios

Hopefully this gets fixed very soon! As it's very prone to remember these workarounds, especially for new developers coming into the team.

[tomheadifen]

Experiencing the same issue

[tomheadifen]

I've created a work around for now by creating a script that changes the env variables. You can run it by running node deploy.js.

deploy.js

// Add env variables here
// This get's calculated after the .env file is read so you can put whatever overrides here.
process.env.VUE_APP_API_URL = "https://my-app-url.com"

/**
 * A helper function for executing shell commands.
 * Executes a shell command and return it as a Promise.
 * @param cmd {string}
 * @return {Promise<string>}
 */
function execShellCommand(cmd) {
  const exec = require('child_process').exec;

  return new Promise((resolve, reject) => {
    exec(cmd, (error, stdout, stderr) => {
      if (error) {
        console.warn(error);
      }
      resolve(stdout ? stdout : stderr);
    });
  });
}

// The deploy script
(async () => {
  // Build assets and move them to dist
  // You'd think that this would create a new process and read the initial .env file but it doesn't.
  await execShellCommand('npm run prod');
  console.log('Compiled to dist/');

  await execShellCommand('firebase deploy');
  console.log('Finished syncing to server');
})()

[tetsuwanadam]

Experiencing this issue as well. It makes testing and deployment somewhat more complicated.

[bstras21]

Having the same issue...

@bstras21, in my environment vue-cli-service builds in development mode with the command suggested by the OP;

ionic build -- --mode development

(note that an additional -- is necessary before --mode development. Vue still builds in production mode without it.)

My ionic info:

Ionic:

   Ionic CLI       : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.2.4

Capacitor:

   Capacitor CLI      : 4.1.0
   @capacitor/android : not installed
   @capacitor/core    : 4.1.0
   @capacitor/ios     : 4.1.0

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v18.8.0 (/usr/local/Cellar/node/18.8.0/bin/node)
   npm    : 8.18.0
   OS     : macOS Monterey