Symfony Encore (Pimcore) + Vuetify

Question

我现在被安可困住了:(

Stack

Pimcore 6.8.10

Symfony 4.4

webpack-安可-包: 1.11.1

vue 2.6

变相2.4.5

摘要

我正在尝试将vuetify组件添加到我已经在工作的项目中。不幸的是，vue加载并可以像往常一样使用(目前我只使用一些自定义组件)。但在这里似乎有点不愿意加入。也许我只是瞎了..。

问题

尽管我在vuetify.js中添加了v图标和v容器(据我所知，它们不应该是必要的)，但这些在FE：控制台错误中是不被识别的。

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不是恰当实例化“的概念。但是为什么呢？

进一步注意到

到目前为止我用的是纱线，没有任何问题。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’导入的，我在web上的常见文章中也发现了这一点。虽然我没有经验，但我没怎么想过。

那么，解决方案是什么：

In app.js:

将Vue from 'vue/dist/vue'导入import Vue from 'vue'

In 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'

谢谢你留下来！

干杯，本特