无法在 .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.

生成代码中有一个错误截图：see here，可能有用。

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

提前致谢。

Answer 1

当我尝试使用命令“vue serve”测试我的单个 vue 组件时，我遇到了同样的问题。没有发出错误。我什至注意到，它没有使用命令“vue serve”，而是执行了“vue- cli-service serve”。我得到一个空白页面，其中只有一个 div 元素和 'id=app'。