Docker+Vite运行报错：无法解析/goalManager包入口，疑与Vuetify相关

问题重现 #

执行docker compose up启动Vite+Docker项目时，出现以下Vite内部服务器错误：

[vite] Internal server error: Failed to resolve entry for package "/goalManager". The package may have incorrect main/module/exports specified in its package.json.
at packageEntryFailure (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:23266:11)
at resolvePackageEntry (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:23263:5)
at tryResolveFile (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:22884:38)
at tryFsResolve (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:22862:16)
at Context.resolveId (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:22731:24)
at Object.resolveId (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:43314:46)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async ModuleGraph.resolveUrl (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:61580:26)
at async ModuleGraph.getModuleByUrl (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:61437:23)
at async doTransform (file:///goalManager/node_modules/vite/dist/node/chunks/dep-79892de8.js:41010:20)

注释Vuetify相关代码后错误消失，确认问题由Vuetify配置不当导致。项目相关配置如下：

package.json #

{
  "name": "vite-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "js-cookie": "^3.0.5",
    "vite-plugin-vuetify": "^1.0.2",
    "vue": "^3.2.47",
    "vue-router": "4",
    "vuetify": "^3.3.10"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "vite": "^4.2.0",
    "vue-cli-plugin-vue-next": "~0.1.4"
  },
  "type": "module"
}

main.js #

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router';

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(router, vuetify).mount('#app')

vite.config.js（未配置Vuetify） #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
        '^/api': {
          target: process.env.VITE_APP_API_BASE,
          changeOrigin: true,
        },
      },
    },
})

解决方案 #

1. 正确配置vite-plugin-vuetify插件 #

Vuetify 3需要通过官方的vite-plugin-vuetify插件与Vite配合，必须在vite.config.js中正确注册该插件：

修改后的vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }) // 开启自动导入Vuetify组件和样式
  ],
  server: {
    proxy: {
        '^/api': {
          target: process.env.VITE_APP_API_BASE,
          changeOrigin: true,
        },
      },
    },
})

2. 修复@vue/compiler-sfc版本兼容性 #

当前使用的@vue/compiler-sfc为beta版本，与Vue 3.2.47存在兼容性问题，需替换为匹配的稳定版本：

修改package.json中的devDependencies部分：

"devDependencies": {
  "@vitejs/plugin-vue": "^4.1.0",
  "@vue/compiler-sfc": "^3.2.47", // 与Vue版本一致
  "vite": "^4.2.0",
  "vue-cli-plugin-vue-next": "~0.1.4"
}

3. 清理Docker与依赖缓存 #

由于Docker环境可能缓存旧的依赖文件，需彻底清理后重新构建：

• 删除本地项目的node_modules和package-lock.json文件
• 停止并移除现有Docker容器：docker-compose down
• 清理Docker镜像缓存（可选，确保彻底清理）：docker system prune -a
• 重新构建并启动项目：docker-compose up --build

内容的提问来源于stack exchange，提问作者kuma