npm运行构建后的组件问题

Question

使用Vue-cli插件，我已经使用Vuetify组件框架创建了小型SPA应用程序。当我在开发人员模式下运行时，一切都很好，但是在生产模式下，组件'installComponents' has already been declared

存在问题

然后我发现这与 Treesharing 选项有关，该选项仅在生产模式下与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

我必须说，当我处于开发环境中时，一切正常。

Answer 1

加载程序运行了两次，这就是为什么您会收到该错误的原因。

希望这对您有帮助： https://github.com/vuetifyjs/vuetify-loader/issues/20