--mode breaks build

[OlivierPetri]

Version

3.5.13

Reproduction link

stackblitz.com

(call: npm run dev --mode development to reproduce)

Steps to reproduce

npm create vue@latest
cd vue-project
npm install
npm run dev --mode development

What is expected?

Vue starting up as if only

npm run dev 

was called

What is actually happening?

http://localhost:5173/ returns 404 - not found

---

Setting "--mode production" has the same effect.

I tried to use .env files for my project until I found out setting --mode would even break the example build.

Observation: The regular (un--moded) build displays

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

on the command line. But with the --mode option set, the two "Vue DevTools" lines are missing.

[yuvalkarif]

Hi @OlivierPetri,

This isn't necessarily a vue or vite issue, but more of a command line issue, let me explain:

When you run npm run dev --mode development, the --mode development part doesn’t go directly to the run dev command. Instead, it’s passed to the script defined under dev in your package.json.

For example, if your package.json contains this script:

{
  "scripts": {
    "dev": "vite"
  }
}

The --mode development argument is sent to Vite, which is the tool being run by npm run dev.

To make it more explicit, you can include a double-dash (--) before your arguments:

npm run dev -- --mode development

The double-dash tells npm that anything after it should go directly to the script being executed, bypassing npm itself.