Vue3 Vite 应用：无法解析源以进行导入分析，因为内容包含无效的 JS 语法

Question

我得到了一个使用 Vite 作为构建工具的 Vue3 应用程序。当我尝试构建应用程序时出现此错误：

但是，我确实安装了 @vitejs/plugin-vue，如我的 package.json 中所示，我相信 @vitejs/plugin-vue 的版本是 5.0.2，一个相当新的版本：

{
  "name": "mlb.web",
  "version": "0.0.0",
  "private": true,
  "charset": "utf-8",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "ant-design-vue": "^4.0.8",
    "axios": "^1.6.3",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "unplugin-auto-import": "^0.17.3",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.10"
  }
}

这是我的 vite.config.js，我相信根本原因就在其中：

import { fileURLToPath, URL } from 'node:url';

import defineConfig from 'vite';
import vue from '@vitejs/plugin-vue';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import Components from 'unplugin-vue-components/vite';
import AntDesignVueResolver from 'unplugin-vue-components/resolvers';
import AutoImport from "unplugin-auto-import/vite"

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            imports: ['vue', 'vue-router'],
            dts: "src/auto-import.d.ts",
        }),
        Components({
            dirs: ["src/components/"],
            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
            resolvers: [
                AntDesignVueResolver({
                    importStyle: false,
                    resolveIcons: true
                }),
            ],
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        ...
    }
})

任何人都可以看到这里发生了什么以及为什么我收到此错误？

Answer 1

终于，我找到了这个愚蠢问题的原因。这是因为我的项目名称包含一个

'

标记。我有一个自动导入插件。当插件尝试解析组件的路径时，该路径将被解析为

import xxxx from 'folder1/folder2/aaaa'sAAAA/xxxx.vue'

正如您在这里看到的，自动生成的路径中有一个额外的

'

标记，这会导致一个简单的语法问题。愚蠢的我！