如何在使用Vue2.6的Laravel9项目中正确安装配置Vuetify

Laravel 9 默认使用Laravel Mix作为构建工具，不存在原生webpack.config.js文件，不需要手动创建该文件，所有构建配置在根目录的webpack.mix.js中调整即可。

• 创建Vuetify插件文件
  在resources/js目录下新建plugins文件夹，在文件夹内新建vuetify.js文件，写入以下内容：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({})

• 调整webpack.mix.js配置
  打开项目根目录的webpack.mix.js，在原有配置基础上添加Vuetify的sass解析规则，参考配置如下：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    // 新增以下Vuetify相关配置
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.s(c|a)ss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('sass'),
                                additionalData: `@import "~vuetify/src/styles/styles.sass"`
                            }
                        }
                    ]
                }
            ]
        }
    });

• 修改resources/js/app.js配置
  打开resources/js/app.js，引入刚才创建的Vuetify实例，并挂载到Vue根实例上，核心调整点如下：

import Vue from 'vue';
// 引入Vuetify实例
import vuetify from './plugins/vuetify';

// 你原有的路由、组件注册等代码保持不变

new Vue({
    el: '#app',
    // 原有router、组件注册等配置保持不变
    vuetify, // 新增这行，挂载Vuetify实例
});

• 验证配置生效
  在任意Vue组件中引入Vuetify组件测试即可，例如添加一个Vuetify按钮：

<template>
    <v-btn color="primary">测试按钮</v-btn>
</template>

执行npm run dev重新编译前端资源，页面正常渲染蓝色风格按钮即配置成功。

注意：Vue 2.6仅兼容Vuetify 2.x版本，如果安装时默认拉取了3.x版本，先执行npm uninstall vuetify卸载，再执行npm install vuetify@2安装兼容版本即可。

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