我使用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文件中使用的特定组件?
1条答案
按热度按时间yb3bgrhw1#
使用Vuetify进行自动树摇可以通过将
vite-plugin-vuetify
添加到vite.config.js
(您已经完成了),然后从main.js
中删除以下导入(在您的案例中为app.js
)来完成:字符串