使用Vue组件出现空白屏，全局注册vue-select的方式是否正确？

1. 你当前的组件注册方式是错误的 #

你采用的实例化Vue之后链式调用.component()的写法不兼容Vue 2版本，也是本次白屏的直接诱因：

• Vue 2的全局组件注册方法是Vue构造函数的静态方法Vue.component()，必须在根实例创建之前调用，new Vue()返回的根实例本身没有component方法，调用不存在的方法会抛出JS异常，直接阻断页面渲染导致白屏。

2. 正确写法示例 #

Vue 2环境正确注册代码 #

首先确认你已经在文件顶部导入了vue-select的组件和样式：

import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

再调整注册顺序：

// 先注册全局组件
Vue.component("v-select", vSelect)
// 再实例化根组件
new Vue({
  render: (h) => h(App)
}).$mount("#app")

Vue 3环境说明 #

如果是Vue 3环境，你需要改用createApp的写法，此时链式调用.component()是合法的：

import { createApp } from 'vue'
import App from './App.vue'
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'

createApp(App)
  .component('v-select', vSelect)
  .mount('#app')

额外验证点 #

如果调整注册方式后仍有白屏问题，可以打开浏览器控制台查看报错：

• 若提示vSelect is not defined，说明你没有正确导入vue-select组件
• 若提示样式异常，检查是否导入了vue-select的css文件

内容的提问来源于stack exchange，提问作者Fay Chen