vue.js - 无法在 .vue 文件上运行 vue serve 命令

Question

create-vite-app我刚刚使用工具创建了一个新的 Vue 3 项目：

npx create-vite-app vite-app-for-test
cd vite-app-for-test
npm install

生成的项目结构是这样的：

vite-app-for-test
|- /public
|- /src
  |- /assets
  |- /components
    |- HelloWorld.vue
  |- App.vue
  |- main.js
  |- index.css
|- index.html
|-package.json

现在我想在我的项目中测试这个功能：Instant Prototyping。我已经在我的机器上安装了 Vue 3 和 Vue CLI，它们都是最新版本：@vue/cli 4.5.15, vue@3.2.21.

然后我按照指南进行了@vue/cli-service-global全局安装：

npm install -g @vue/cli-service-global

我首先尝试了这个：

vue serve ./src/main.js

服务器已启动，没有发出任何错误，并且演示页面正确显示。

但是如果我将此命令应用于App.vue：

vue serve ./src/App.vue

这里出了问题。我在终端中收到警告，但服务器已成功启动：

 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

我打开时浏览器什么也不显示http://localhost:8080/。控制台记录了一些错误：

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.

在生成的代码中有一个关于错误的屏幕截图：看这里，可能有用。

到底是怎么回事？当我vue serve在单个.vue条目上运行时有什么问题吗？如果它是 Vue CLI 的错误，是否有任何替代解决方案用于即时原型设计？

提前致谢。

标签： vue.jsvuejs3vue-cli-4