Failed to run vue serve command on a .vue file - vue.js

Question

I just created a new Vue 3 project using create-vite-app tool:
npx create-vite-app vite-app-for-test
cd vite-app-for-test
npm install
The generated project structure is like this:
vite-app-for-test
|- /public
|- /src
|- /assets
|- /components
|- HelloWorld.vue
|- App.vue
|- main.js
|- index.css
|- index.html
|-package.json
Now I want to test out this feature: Instant Prototyping , on my project.
I've already installed Vue 3 and Vue CLI on my machine, both are the latest versions: #vue/cli 4.5.15, vue#3.2.21.
Then I followed the guide and installed #vue/cli-service-global globally:
npm install -g #vue/cli-service-global
I tried this first:
vue serve ./src/main.js
The server started, no errors were emitted, and the demo page shows correctly.
but if I apply this command on App.vue:
vue serve ./src/App.vue
Things are going wrong here. I got a warning in my terminal but the server started successfully though:
WARNING Compiled with 1 warning
warning in C:/Users/xxx/AppData/Roaming/npm/node_modules/#vue/cli-service-global/template/main.js
"export 'default' (imported as 'Vue') was not found in 'vue'
App running at:
- Local: http://localhost:8080/
- Network: unavailable
The browser display nothing when I opened http://localhost:8080/. And there are some errors logged by the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'config')
at eval (main.js?6f7e:4)
at Module.C:\Users\xxx\AppData\Roaming\npm\node_modules\#vue\cli-service-global\template\main.js (chunk-vendors.js:470)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1022)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
at app.js:925
at app.js:928
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
There's a screenshot about the error in the generated code: see here, possibly useful.
What is going on? Is there any wrong when I run vue serve on a single .vue entry? And if it's a bug of Vue CLI, is there any alternative solution for instant prototyping?
Thanks in advance.

Answer 1

I'm meetting the same question when i try to test my single vue component with command "vue serve".No errors were emitted.I even noticed that instead of using the command "vue serve", it executed "vue-cli-service serve" instead.I get a blank page with just a div element with the 'id=app'.