vuetify:如何在使用laravel + vite + inertiajs + vue时只导入vuetify中需要的组件?

agxfikkp  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(209)

我使用npm i vuetify@^3.3.7手动导入了vuetify,并将这段代码粘贴到了我的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,
});

字符串
下面是我的app.js的屏幕截图


的数据
我还安装了一个名为vite-plugin-vuetify的插件,并在我的vite.config.js文件中添加了这些代码行。

import vuetify from "vite-plugin-vuetify";
...
vuetify({ autoImport: true }),


下面是我的vite.config.js文件的屏幕截图



我的问题是...每当我在Web浏览器中加载我的项目时,所有未包含在我的项目中的不必要的vuetify组件都会自动加载,这会导致我的项目加载缓慢。
下面是我的项目的网络选项卡的截图,供您参考



所以我的问题是:如何手动导入只在Vue文件中使用的特定组件?

yb3bgrhw

yb3bgrhw1#

使用Vuetify进行自动树摇可以通过将vite-plugin-vuetify添加到vite.config.js(您已经完成了),然后从main.js中删除以下导入(在您的案例中为app.js)来完成:

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

字符串

相关问题