Блог

Используя плагин Vue-cli, я создал небольшое SPA-приложение с Vuetify component framework. Когда я работал в режиме разработки, все было нормально, но в производственном режиме возникла проблема с компонентами 'installComponents' has already been declared

Затем я узнал, что это было связано с опцией встряхивания дерева, которая работает только с webpack 4 в рабочем режиме. Или, если быть более точным, включая компоненты, которые вам нужны, вместо того, чтобы получать их все.

Итак, вместо регистрации каждого отдельного компонента я попытался использовать vuetify-loader для автоматизации «компонентов по меню«, но мне кажется, что я чего-то не хватает.

мой plugins/vuetify.js

 import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify)
  

И мой vue.config.js похоже на это

 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}
  

И main.js похоже на это:

 import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store/store'
import axios from 'axios';

Vue.config.productionTip = false

//adding main path to baseurl
axios.defaults.baseURL = "";
// Global settings for Axios
Vue.prototype.$http = axios;


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  

И я все еще получаю эту ошибку

 Module parse failed: Identifier 'installComponents' has already been declared (35:7)
  

Стоит упомянуть, что мой babel.config.js выглядит так:

 module.exports = {
  presets: [
    '@vue/app'
  ]
}
  

Я использую vue 2.5.21 и vuetify 1.3.0

Обновить

Я изменил свой vue.config.js с этими строками

 module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/hr-map/'
        : '/vue-map/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                // modify the options...
                return options
            })
    }
}
  

Но сейчас в процессе производства я получаю довольно странную ошибку для своих компонентов

 Uncaught TypeError: T(...)(...) is not a function
at Module.56d7 (VectorFeatures.vue:37)
at r (bootstrap:78)
at Object.0 (bootstrap:151)
at r (bootstrap:78)
at i (bootstrap:45)
at bootstrap:151
at bootstrap:151
  

Я должен сказать, что когда я нахожусь в среде разработки, все работает нормально.