0

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.

Lorryntz
  • 1
  • Vite and Vue CLI serve the same purpose. They aren't supposed to be used together. You can't specify Vue version in "Instant Prototyping". It appears that it uses Vue 2 by default, while the project uses Vue 3. – Estus Flask Nov 07 '21 at 20:00
  • @EstusFlask Does that mean this feature is currently not supported in Vue 3? Are there any alternative tools that can do the same job, I mean, serve a single Vue component to make prototyping a new component a lot easier? – Lorryntz Nov 08 '21 at 03:38
  • I'm unaware of alternatives. Maybe try `@vue/cli@next` version. See https://github.com/vuejs/vue-cli/issues/6064 . Notice that it demands there should be no package.json – Estus Flask Nov 08 '21 at 04:51

1 Answers1

0

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'.

Shangneng Wang
  • 11
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 09 '22 at 08:40