Vue.js npm运行构建后的组件问题
我使用Vue cli插件创建了带有Vuetify组件框架的小型SPA应用程序。当我在开发模式下运行时,一切正常,但在生产模式下,组件出现了问题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
“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环境中时,一切都很好