Symfony Encore (Pimcore) + Vuetify

Question

我现在被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中不被识别:控制台

错误v-icons错误:

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

v-container错误:

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

(我只知道在这里会引起问题，所以我使用这些元素进行测试。在HTML中，它们只是被经常使用:<v-icon>mdi-home</v-icon>)
当然，它们应该由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

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

如问题所示，我从"vuetify/lib"one_answers"vue/dist/vue"导入，这是我的IDE建议的，我在网上的常见文章中找到了。因为我没有经验，所以没把它当回事。

那么，解决方案是什么呢?

在app.js:
importVue from 'vue/dist/vue'toimport 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'

感谢您的支持!
欢呼,弯曲的