Laravel+Vite+InertiaJS+Vue中如何按需导入Vuetify组件

1. 修改app.js的组件/指令导入逻辑 #

把原来全局导入所有组件和指令的代码，替换成仅导入项目中实际使用的组件和指令：

原代码：

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

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

修改示例（假设你用到VBtn、VCard组件和Ripple指令）：

import "vuetify/styles";
import { createVuetify } from "vuetify";
// 仅导入实际使用的组件
import { VBtn, VCard } from "vuetify/components";
// 仅导入实际使用的指令
import { Ripple } from "vuetify/directives";

const vuetify = createVuetify({
  components: {
    VBtn,
    VCard
  },
  directives: {
    Ripple
  },
});

2. 调整vite.config.js的插件配置 #

由于要手动控制导入，需要关闭vite-plugin-vuetify的自动导入功能，避免和手动导入冲突：

原配置：

import vuetify from "vite-plugin-vuetify";

// ...
vuetify({ autoImport: true }),

修改为：

import vuetify from "vite-plugin-vuetify";

// ...
vuetify({ autoImport: false }),

3. 注意事项 #

• 每次新增使用Vuetify组件/指令时，都需要在app.js中手动导入并注册对应的项
• 及时删除项目中未使用的组件/指令导入，避免冗余代码
• 全局样式"vuetify/styles"仍需保留，它包含Vuetify的基础样式系统

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