Laravel 8+Vue 3非Vue CLI环境下安装Vuetify 2.x出现导出警告、组件失效及主题异常问题求助

嘿，我帮你梳理了下当前遇到的问题，核心根源是版本不兼容——这也是你看到一堆警告、部分Vuetify组件和主题颜色失效的原因。下面给你详细分析和两种可行的解决方案：

问题根源拆解 #

• 你安装的vuetify@2.6.5是仅支持Vue 2.x的版本，但你同时装了vue@3.2.31，Vue 3.x的模块导出方式和Vue 2.x完全不同，所以才会出现export 'default' (imported as 'Vue') was not found in 'vue'这类警告。
• 另外，vue-template-compiler@2.6.14是Vue 2.x的专属依赖，Vue 3.x应该用@vue/compiler-sfc，版本不匹配也会加剧编译问题，导致组件渲染异常。

解决方案（二选一，根据你的需求选择） #

方案1：降级Vue到2.x（适配现有Vuetify 2.x）

这是最省心的方案，不需要大幅改动现有配置：

1. 先卸载不兼容的依赖：

npm uninstall vue vue-router vuex vue-axios
npm uninstall vue-template-compiler

2. 安装Vue 2.x及对应兼容版本的依赖：

npm install vue@2.6.14 vue-router@3.6.5 vuex@3.6.2 vue-axios@2.1.5
npm install vue-template-compiler@2.6.14 --save-dev

3. 修正app.js里的Vuetify初始化逻辑（注意不要重复调用Vue.use(Vuetify)，并且要使用你在plugins/vuetify.js导出的实例）：

require('./bootstrap');
require('alpinejs');
require('livewire-vue');
import 'material-design-icons-iconfont/dist/material-design-icons.css';

import Vue from 'vue'
import vuetify from "../plugins/vuetify" // 这里用小写的vuetify，对应导出的实例

// 移除多余的Vue.use(Vuetify)，因为plugins/vuetify.js里已经执行过了
new Vue({
  el: '#facility',
  vuetify: vuetify, // 传入实例而非Vuetify类
  data: () => ({
    url: dir,
    search: '',
  }),
  // 你的其他组件逻辑...
})

4. 重新编译资源：

npm run dev

方案2：升级Vuetify到3.x（适配Vue 3.x）

如果你想保留Vue 3.x的特性，需要升级到支持Vue 3的Vuetify 3.x，但配置会有不少变化：

1. 卸载旧的Vuetify依赖：

npm uninstall vuetify vuetify-loader

2. 安装Vuetify 3.x及适配Vite的插件（Laravel 8后期支持Vite，更推荐用Vite替代Mix）：

npm install vuetify@3.1.11 vite-plugin-vuetify --save-dev
npm install @vitejs/plugin-vue laravel-vite-plugin --save-dev

3. 替换webpack.mix.js为Vite配置文件（vite.config.js）：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
        vuetify({ autoImport: true }),
    ],
});

4. 重写plugins/vuetify.js适配Vuetify 3.x：

import '@mdi/font/css/materialdesignicons.css' // 推荐用Material Design Icons
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default createVuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: "#4682b4",
          secondary: "#b0bec5",
          accent: "#8c9eff",
          error: "#b71c1c",
        },
      },
    },
  },
})

5. 调整app.js为Vue 3的初始化方式：

import './bootstrap';
import 'alpinejs';
import { createApp } from 'vue'
import vuetify from './plugins/vuetify'

const app = createApp({
  data() {
    return {
      url: dir,
      search: '',
    }
  },
  // 你的其他组件逻辑...
})

app.use(vuetify)
app.mount('#facility')

6. 更新Blade视图中的资源引入，改用Vite指令：

@vite(['resources/css/app.css', 'resources/js/app.js'])

7. 重新编译资源：

npm run dev

小提示 #

• 方案1中，要确保livewire-vue版本兼容Vue 2.x，建议查看其文档确认。
• 方案2中，Vuetify 3.x的部分组件API和2.x有差异，比如v-rating的用法略有调整，需要对照官方文档修改代码。

内容的提问来源于stack exchange，提问作者Lynette García