Symfony Encore（Pimcore）+ Vuetify

Question

我目前还在坚持安可。 :(

堆栈
Pimcore 6.8.10
交响乐 4.4
webpack-encore-bundle: 1.11.1
vue 2.6
验证 2.4.5

总结
我正在尝试将 vuetify 组件添加到我已经在工作的项目中。不幸的是 vue 加载并可以照常使用（目前我只使用一些自定义组件）。但是vuetify好像有点不愿意加在这里。也许我只是瞎了...

问题
尽管我在 vuetify.js 中添加了 v-icon 和 v-container（据我所知，这不是必需的），但 FE 无法识别它们： Error in console

v 图标错误：

[Vue warn]: Error in render: "TypeError: vm.$vuetify.icons is undefined"

v 容器错误：

[Vue warn]: Unknown custom element: <v-container>

（我只知道这些元素会在这里引起问题，所以我使用这些元素进行测试。在 HTML 中，它们只是经常使用：<v-icon>mdi-home</v-icon>）
Afaik，这些应该由 vuetify 正确定义。

这或多或少让我想到“vuetify 没有正确实例化”。但是为什么？

补充说明
到目前为止，我使用纱线没有任何问题。 yarn encore dev --watch这里不会抛出任何错误

以下配置我目前正在使用： webpack.config.js:

    let Encore = require('@symfony/webpack-encore');
    const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
    
    
    if (!Encore.isRuntimeEnvironmentConfigured()) {
        Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
    
    
    // Setting if hashes are being used here
    let toVar;
    if (Encore.isProduction()) {
        toVar = 'images/[path][name].[hash:8].[ext]'
    } else {
        toVar = 'images/[path][name].[ext]'
    }
    
    
    Encore
        .setOutputPath('web/build/')
        .setPublicPath('/build')
        .copyFiles({
            from: './assets/images',
            to: toVar
        })
        .addEntry('app', './assets/app.js')
        .splitEntryChunks()
        .enableSingleRuntimeChunk()
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())
        .enableVersioning(Encore.isProduction())
        .configureBabelPresetEnv((config) => {
            config.useBuiltIns = 'usage';
            config.corejs = 3;
        })
        .enableSassLoader()
        .enableTypeScriptLoader()
        .enableVueLoader(() => {}, {
            runtimeCompilerBuild: false
        })
        .addPlugin(new VuetifyLoaderPlugin())
    
    module.exports = Encore.getWebpackConfig();

app.js:

import Vue from 'vue/dist/vue'
import './scss/app.scss'
import vuetify from "./js/plugins/vuetify";

// Custom components
import HeaderComponent from "./js/components/HeaderComponent"
import FooterComponent from "./js/components/FooterComponent";
import UserQuickInfoLoggedInComponent from "./js/components/UserQuickInfoLoggedInComponent";
import UserQuickInfoLoggedOutComponent from "./js/components/UserQuickInfoLoggedOutComponent";
import StoryDetailOnOverviewComponent from "./js/components/StoryDetailOnOverviewComponent";
import StoryOnOverviewComponent from "./js/components/StoryOnOverviewComponent";
import StoryDetailOnDetailComponent from "./js/components/StoryDetailOnDetailComponent";
import UserSubscriptionComponent from "./js/components/UserSubscriptionComponent";
import SubscribeComponent from "./js/components/SubscribeComponent";
import ErrorComponent from "./js/components/async/ErrorComponent";
import SuccessComponent from "./js/components/async/SuccessComponent";
import BreadcrumbComponent from "./js/components/BreadcrumbComponent";

const App = new Vue({
    vuetify,
    components: {
        'header-component': HeaderComponent,
        'footer-component': FooterComponent,
        'user-quick-info-logged-in-component': UserQuickInfoLoggedInComponent,
        'user-quick-info-logged-out-component': UserQuickInfoLoggedOutComponent,
        'story-detail-on-overview-component': StoryDetailOnOverviewComponent,
        'story-on-overview-component': StoryOnOverviewComponent,
        'story-detail-on-detail-component': StoryDetailOnDetailComponent,
        'user-subscription-component': UserSubscriptionComponent,
        'subscribe-component': SubscribeComponent,
        'error-component': ErrorComponent,
        'success-component': SuccessComponent,
        'breadcrumb-component': BreadcrumbComponent
    }
})

// Create the App & mount it

App.$mount('#app-root')

export default App

vuetify.js:

// assets/js/plugins/vuetify.js

import Vue from 'vue'
import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify/lib'
import {
    Ripple
} from 'vuetify/lib/directives'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)
import 'vuetify/dist/vuetify.min.css'

export default new Vuetify({
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
    components: {
        'v-icon': VIcon,
        'v-container': VContainer
    },
    directives: {
        Ripple,
    },
})

提前感谢您的帮助:)
最好，弯曲

Answer 1

对于有类似问题的人：我找到了解决方案。

如问题所示，我按照 IDE 的建议从 'vuetify/lib' 和 'vue/dist/vue' 导入，我在网络上的常见文章中找到了。由于我没有经验，所以我没有想太多。

那么，解决方法是什么：

在app.js中：
将 Vue from 'vue/dist/vue' 导入 import Vue from 'vue'

在vuetify.js中：\

import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify/lib'

import {
    Ripple
} from 'vuetify/lib/directives'

到

import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify'

import {
    Ripple
} from 'vuetify'

感谢您的支持！
干杯，弯曲

Symfony Encore（Pimcore）+ Vuetify

Symfony Encore (Pimcore) + Vuetify

pimcore

vue.js

vuetify.js

webpack-encore

symfony4