使用 Vue 整合時，我在將 Vuetify 3 新增到 Astro 時遇到問題。 這是我到目前為止所擁有的：
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import vuetify from 'vite-plugin-vuetify';
// https://astro.build/config
export default defineConfig({
integrations: [vue()],
vite: {
ssr: {
noExternal: ['vuetify'],
},
plugins: [vuetify()],
},
});
我收到 'Vuetify 外掛程式必須在 vue 外掛程式之後載入' 錯誤。
不知道如何從這裡繼續前進。我願意接受所有建議。
Astro 整合中的配置(
@astrojs/vue在本例中）被附加到您自己的Astro 設定中，因此vuetify# 外掛程式將首先在此處註冊。解決方法是定義您自己的 Astro 整合，呼叫
updateConfig()新增驗證：// astro.config.mjs import vuetifyPlugin from 'vite-plugin-vuetify'; /** * Vuetify integration for Astro * @param {import('astro/config').Options} options * @returns {import('astro/config').AstroIntegration} */ function vuetify(options) { return { name: 'my-astro-vuetify-integration', hooks: { 'astro:config:setup': ({ updateConfig }) => { updateConfig({ vite: { ssr: { noExternal: ['vuetify'], }, plugins: [vuetifyPlugin()], }, }); }, }, } }並在 Vue 整合之後安裝它：
// astro.config.mjs export default defineConfig({ integrations: [ vue(), vuetify(), ], })