如何在纯HTML页面中挂载Vuetify 2.x组件？

问题 #

我用Vuetify 2.x/Webpack开发了一些组件，想在纯HTML网页（完全不基于Vue）里使用，需求是用户点击按钮后，调用函数创建并挂载组件到DOM中。

我的思路是写了如下main.js文件：

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import TicketsView from '@/views/tickets-view.vue'

Vue.component('TicketsView', TicketsView)

function mount (id) {
  return new Vue({
    el: id,
    vuetify
  })
}

export default mount

请问这种方式可行吗？是否正确？

我尝试打包成库后在demo.html中使用，但无法正常运行。打包后的库文件是vue-component-library.umd.js，Webpack生成的demo.html如下：

<meta charset="utf-8">
<title>vue-component-library demo</title>
<script src="./vue-component-library.umd.js"></script>

<link rel="stylesheet" href="./vue-component-library.css">


<script>
console.log(window['vue-component-library'])
</script>

控制台报错：

vue-component-library.umd.js:27263 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at Module.fb15 (vue-component-library.umd.js:27263:104)
    at __webpack_require__ (vue-component-library.umd.js:30:30)
    at vue-component-library.umd.js:94:18
    at vue-component-library.umd.js:97:10
    at webpackUniversalModuleDefinition (vue-component-library.umd.js:9:35)
    at vue-component-library.umd.js:10:3

求解决思路。

解决思路与修正方案 #

1. 报错原因 #

这个错误是因为Vue没有被正确引入：你的库代码依赖Vue，但打包时既没把Vue内置到库文件，也没在HTML中提前引入Vue，导致运行时找不到Vue对象，进而无法调用Vue.extend这类核心方法。

2. 修正main.js逻辑 #

你当前的mount函数有缺陷：只指定了挂载目标el，但没有明确要渲染的组件（纯HTML环境没有Vue模板解析能力，全局注册组件没用）。修改后的代码直接把目标组件作为根组件渲染：

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import TicketsView from '@/views/tickets-view.vue'

export default function mount (container) {
  // 直接创建Vue实例并挂载目标组件
  return new Vue({
    vuetify,
    render: h => h(TicketsView)
  }).$mount(container)
}

3. 调整Webpack打包配置 #

配置Webpack将Vue和Vuetify设为外部依赖（不打包进你的库文件），减小体积同时避免重复打包：
在webpack.config.js中添加externals配置：

module.exports = {
  // ...其他原有配置
  externals: {
    vue: 'Vue',
    vuetify: 'Vuetify'
  }
}

4. 修正demo.html #

需要在你的库文件之前，提前引入Vue和Vuetify的CDN资源，同时添加触发挂载的按钮逻辑：

<meta charset="utf-8">
<title>vue-component-library demo</title>
<!-- 先引入Vue 2.x核心库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入Vuetify 2.x及官方样式 -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.10/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.10/dist/vuetify.min.js"></script>

<!-- 引入你的组件库 -->
<script src="./vue-component-library.umd.js"></script>
<link rel="stylesheet" href="./vue-component-library.css">

<!-- 挂载容器与触发按钮 -->
<div id="component-container"></div>
<button onclick="mountMyComponent()">挂载组件</button>

<script>
// 从全局对象获取挂载函数
const mountComponent = window['vue-component-library'].default;

function mountMyComponent() {
  // 挂载到指定DOM容器
  mountComponent('#component-container');
}
</script>

5. 验证流程 #

重新打包组件库，打开demo.html点击按钮，即可完成组件挂载。如果出现样式异常，检查Vuetify样式是否正确引入，以及组件自身样式是否被Webpack正确输出。

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