Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js npm运行构建后的组件问题_Vue.js_Webpack_Vuetify.js_Vue Cli - Fatal编程技术网

Vue.js npm运行构建后的组件问题

Vue.js npm运行构建后的组件问题,vue.js,webpack,vuetify.js,vue-cli,Vue.js,Webpack,Vuetify.js,Vue Cli,我使用Vue cli插件创建了带有Vuetify组件框架的小型SPA应用程序。当我在开发模式下运行时,一切正常,但在生产模式下,组件出现了问题“installComponents”已经声明了 然后我发现这与树摇选项有关,只有Webpack4在生产模式下才能工作。或者更准确地说,包括您需要的组件,而不是获取所有组件 因此,我没有注册每一个组件,而是尝试使用vuetify loader来自动化“点菜组件”,但我似乎遗漏了一些东西 我的插件/vuetify.js import Vue from 'vu

我使用Vue cli插件创建了带有Vuetify组件框架的小型SPA应用程序。当我在开发模式下运行时,一切正常,但在生产模式下,组件出现了问题
“installComponents”已经声明了

然后我发现这与树摇选项有关,只有Webpack4在生产模式下才能工作。或者更准确地说,包括您需要的组件,而不是获取所有组件

因此,我没有注册每一个组件,而是尝试使用vuetify loader来自动化“点菜组件”,但我似乎遗漏了一些东西

我的插件/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.exports = {
  presets: [
    '@vue/app'
  ]
}
我还是会犯这个错误

Module parse failed: Identifier 'installComponents' has already been declared (35:7)
值得一提的是,我的babel.config.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.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

我必须说,当我在dev环境中时,一切都很好