错误：无法解析源以进行导入分析，因为内容包含无效的 JS 语法

Question

当我使用vite vue对Web组件进行单元测试时，遇到了这个错误：

错误：无法解析源以进行导入分析，因为内容包含无效的 JS 语法。您可能需要安装适当的插件来处理 .html 文件格式。 ❯ formatError node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38663:46 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38659:19 ❯ TransformContext.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:56777:22 ❯ 异步 Object.transform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30 ❯ 异步 doTransform node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29

如何解决这个问题？

Answer 1

这里显示文件的 HTML 部分被视为 javascript，这意味着 Vue 无法识别此 HTML。

在我的例子中，错误是因为我将一个组件命名为 *.Vue（大写 V），而不是 *.vue。

import MyComp from "@/components/MyComp.Vue"; //This does not work.

我必须将文件名更改为 .vue 并更改导入语句才能使其正常工作。 我还重新启动了服务器（以防万一）

import MyComp from "@/components/MyComp.vue"; //This does work with same file name.

这可能是因为 .Vue 文件被视为普通的 js 文件（而不是组件）..只是猜测，我是 Vue 新手。