Symfony Encore (Pimcore) + Vuetify

如何解决Symfony Encore (Pimcore) + Vuetify

我目前坚持使用 encore。 :(

堆栈
Pimcore 6.8.10
Symfony 4.4
webpack-encore-bundle: 1.11.1
Vue 2.6
Vuetify 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,},})

在此先感谢您的帮助:)
最好， 弯了

解决方法

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

如问题所示，我从 'vuetify/lib' 和 'vue/dist/vue' 导入，正如我的 IDE 建议的那样，我在网上的常见文章中找到了。 尽管我没有经验，但我并没有想太多。

那么，解决方案是什么：

在 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,VContainer
} from 'vuetify'

import {
    Ripple
} from 'vuetify'

谢谢你的陪伴！
干杯， 弯了