Vuejs ， Bootstrap-Vue： 空白页面： Webpack say， "Cannot read property 'bindings' of null"

Question

那里。

我的项目有一个奇怪的疑难解答。昨天，一切顺利。呈现的所有页面。在我决定只从Bootstrap Vue导入我正在使用的组件之前，没有任何问题，因为当我从生产中构建它时，Webpack说，"项目太重了，可能会导致性能下降"。然后，所有奇怪的项目都停止了工作(如果你转到localhost:8080，你会看到一个空白页面，没有关于正在发生的事情的信息(。我查看了Bootstrap Vue的文档以获取更多信息，找到了这段代码，并将其粘贴到Vue.config.js:中

module.exports = {
configureWebpack: {
resolve:{
alias: {
'bootstrap-vue$' : 'bootstrap-vue/src/index.js'
}
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/(?!bootstrap-vue/src/)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
],
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
vue$: 'vue/dist/vue.esm.js' 
}
}
}
}

}

我再次运行我的项目，出现了这个错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /home/juny/AppsWorkspace/twitty-alpha/src/router/index.js: Cannot 
read property 'bindings' of nul

我检查了路由器的"index.js"，并没有发现任何异常。这是"router/index.js"的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import SignUp from '../views/SignUp.vue'
import TwittyUI from '../views/TwittyUI.vue'
import UserProfile from '../views/UserProfile.vue'
import Settings from '../views/Settings.vue'
import Chat from '../views/Chat.vue'
import UserVerified from '../views/userVerified.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/signUp',
name: 'SignUp',
component: SignUp
},
{
path: '/twit',
name: 'TwittyUI',
component: TwittyUI,
},
{
path: '/userProfile',
name: 'UserProfile',
component: UserProfile,
},
{
path: '/settings',
name: 'Settings',
component: Settings,
},
{
path: '/chat',
name: 'Chat',
component: Chat,
},
{
path: '/userVerified',
name: 'UserVerified',
component: UserVerified,
}
]
const router = new VueRouter({
routes
}) 
export default router

我的main.js文件：

import '@babel/polyfill'
import 'mutationobserver-shim'
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import { 
BootstrapVue, 
IconsPlugin,
LayoutPlugin,
BForm,
BFormInput,
BButton,
BCard,
NavbarPlugin,
FormTagsPlugin
} from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(LayoutPlugin)
Vue.use(BForm)
Vue.use(BFormInput)
Vue.use(BButton)
Vue.use(BCard)
Vue.use(NavbarPlugin)
Vue.use(FormTagsPlugin)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')

这是我的包.json，用于更深入的了解：

{
"name": "twitty-alpha",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap-vue": "^2.1.0",
"core-js": "^3.6.4",
"firebase": "^7.14.2",
"idb": "^5.0.2",
"register-service-worker": "^1.7.1",
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@babel/polyfill": "^7.7.0",
"@vue/cli-plugin-babel": "^4.3.0",
"@vue/cli-plugin-e2e-cypress": "^4.3.0",
"@vue/cli-plugin-eslint": "^4.3.0",
"@vue/cli-plugin-pwa": "^4.3.0",
"@vue/cli-plugin-router": "^4.3.0",
"@vue/cli-plugin-unit-jest": "^4.3.0",
"@vue/cli-service": "^4.3.0",
"@vue/test-utils": "1.0.0-beta.31",
"babel-eslint": "^10.1.0",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.3.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"mutationobserver-shim": "^0.3.3",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.6",
"sass": "^1.19.0",
"sass-loader": "^8.0.0",
"vue-cli-plugin-bootstrap-vue": "^0.6.0",
"vue-template-compiler": "^2.6.11"
}
}

对不起，我发了这么长的帖子，但我正在努力把所有相关的事情都摆到桌面上。所以，其他人可以用它来解决他们的问题。我对Webpack和Babel没有任何了解，所以我想这可能是一件愚蠢的事情。但这是我所不知道的。所以，狩猎快乐！！让我知道你做了什么。

Answer 1

弹出的一个问题是，您将Vue.use(..)用于组件和插件。。。这是行不通的。此外，当您Vue.use(BootstrapVue)时，您正在安装所有BootstrapVue(不包括图标(。这不是你所期望的。

// Register plugins
Vue.use(IconsPlugin)
Vue.use(LayoutPlugin)
Vue.use(NavbarPlugin)
Vue.use(FormTagsPlugin)
// Register components
Vue.component('BForm', BForm)
Vue.component('BFormInput', BFormInput)
Vue.component('BButton', BButton)
Vue.component('BCard', BCard)