Vue3+Vuetify3.0.0-beta.4中如何将Vuetify配置从main.js抽离

问题场景 #

项目中组合使用Vue 3与Vuetify 3.0.0-beta.4版本，初始将所有Vuetify配置直接写在src/main.js中，完整初始代码如下：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

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

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
            background: '#FFFFFF',
            surface: '#FFFFFF',
            primary: '#6200EE',
            'primary-darken-1': '#3700B3',
            secondary: '#03DAC6',
            'secondary-darken-1': '#018786',
            error: '#B00020',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FB8C00'
        }
      }
    }
  }
})
// --- VUETIFY - END ---

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

该初始代码可正常运行，但随着Vuetify配置项（图标、国际化、自定义指令、组件别名等）不断增加，main.js会快速变得杂乱、可读性差。将Vuetify配置抽离到独立文件src/plugins/vuetify.js的正确实现方式如下：

实现步骤 #

• 新建配置文件src/plugins/vuetify.js，迁移所有Vuetify相关的导入、实例创建逻辑，最终将创建好的vuetify实例默认导出：

// src/plugins/vuetify.js
// 注意：全局样式引入必须保留在这个文件里，不要挪到main.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
            background: '#FFFFFF',
            surface: '#FFFFFF',
            primary: '#6200EE',
            'primary-darken-1': '#3700B3',
            secondary: '#03DAC6',
            'secondary-darken-1': '#018786',
            error: '#B00020',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FB8C00'
        }
      }
    }
  }
})

• 精简src/main.js，删除原有所有Vuetify相关代码，改为从上述插件文件导入vuetify实例即可：

// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// 导入抽离好的vuetify实例
import vuetify from './plugins/vuetify'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(vuetify)

app.mount('#app')

抽离失败的常见原因：

1. 插件文件中没有用export default导出创建好的vuetify实例
2. 漏了在插件文件中引入vuetify/styles全局样式，导致组件样式丢失
3. 导入vuetify实例时路径书写错误

后续新增Vuetify相关配置，直接修改src/plugins/vuetify.js即可，不会再造成main.js臃肿。

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