使用Importmap通过CDN加载Vuetify3时出现defineComponent读取错误

问题描述 #

我按照Vuetify 3官方文档的CDN安装步骤配置项目，相关代码如下：

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js",
          "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.esm-browser.js",
          "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api@6/lib/esm/index.js"
        }
      }
    </script>

    <!--vuetify-->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.14/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.14/dist/vuetify.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js #

import { createApp } from 'vue'
import App from './App.vue'
import Home from '/src/views/Home.vue'
import About from '/src/views/About.vue'
import { createRouter, createWebHistory } from 'vue-router'

import './assets/main.css'

// router
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes, // short for `routes: routes`
})

// vuetify
const { createVuetify } = Vuetify
const vuetify = createVuetify()

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

运行yarn dev后，浏览器报错：

Cannot read properties of undefined (reading 'defineComponent')

问题原因 #

项目采用ES模块模式（main.js为type="module"），但Vuetify使用了UMD格式的CDN脚本，混合模式导致Vuetify无法正确获取全局Vue实例，进而内部调用defineComponent时出现未定义错误。

修复步骤 #

1. 统一使用ES模块引入Vuetify #

修改index.html，将Vuetify的UMD脚本替换为ES模块的importmap配置：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js",
          "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.esm-browser.js",
          "@vue/devtools-api": "https://cdn.jsdelivr.net/npm/@vue/devtools-api@6/lib/esm/index.js",
          "vuetify": "https://cdn.jsdelivr.net/npm/vuetify@3.1.14/dist/vuetify.esm-browser.js"
        }
      }
    </script>

    <!-- Vuetify CSS -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.14/dist/vuetify.min.css" rel="stylesheet">
    <!-- 可选：引入Material Design图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

• 删除原有的<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.14/dist/vuetify.min.js"></script>
• 添加vuetify的ES模块到importmap
• 可选：引入Material Design图标库，用于Vuetify组件的图标显示

2. 修改main.js中Vuetify的导入方式 #

将原来从全局Vuetify对象解构改为模块导入：

import { createApp } from 'vue'
import App from './App.vue'
import Home from '/src/views/Home.vue'
import About from '/src/views/About.vue'
import { createRouter, createWebHistory } from 'vue-router'
// 导入Vuetify
import { createVuetify } from 'vuetify'

import './assets/main.css'

// router
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// 初始化Vuetify（可选配置图标）
const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
  },
})

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

3. 验证修复 #

重新运行yarn dev，错误应该会消失，Vuetify组件可以正常渲染。

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