Vuejs , Bootstrap-Vue。页面为空白。Webpack说，"不能读取属性'绑定'的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"，没有任何异常。这是 "routerindex.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')

...而这是我的package.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)