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