Vue2配置VueRouter后编译无报错但页面显示空白求助

1. 优先修复路由组件引入路径问题 #

你的路由配置中Home组件的引入存在兼容风险：

// router/index.js 现有错误写法
import Home from '../views/Home'

你的Home组件实际路径为views/Home/index.vue，如果项目webpack配置没有开启「目录index文件自动解析」「.vue后缀省略解析」，这个引入会返回undefined，路由匹配到根路径时找不到对应组件，直接导致<router-view>渲染失败、整页空白，且编译阶段不会抛出任何错误。

修复方式 #

补全组件引入的完整路径：

import Home from '../views/Home/index.vue'

其余路由组件也按同样规则核对，当前懒加载的About组件路径已写全.vue后缀，无该问题。

2. 排查history路由模式的生产环境适配问题 #

你当前路由开启了history模式，该模式下URL不带#标识，需要web服务器配置重定向规则，否则生产环境下所有路径请求（包括根路径）如果没有被服务器转发到index.html，会直接导致资源加载失败、页面空白。

验证与修复 #

• 临时验证可将路由模式改为hash测试：

  const router = new VueRouter({
    mode: 'hash', // 临时替换history做验证
    base: process.env.BASE_URL,
    routes
  })
  

  如果改完hash模式页面可以正常渲染，即可确定是服务器重定向配置缺失，对应部署环境加规则即可：
  • Nginx服务配置中增加try_files $uri $uri/ /index.html;
  • Apache服务在站点目录下放置配置了重写规则的.htaccess文件
  • 若部署在静态托管平台，找到平台的单页应用（SPA）重定向开关开启即可。

3. 排查文件路径大小写兼容问题 #

你的Home组件中引入Partner组件的路径写为../../components/partner.vue，本地开发用Windows/macOS默认是路径大小写不敏感，但生产构建如果跑在Linux系统上，Linux对路径大小写严格敏感，如果组件实际文件名是Partner.vue（首字母大写），该引入会直接找不到文件，导致Home组件渲染失败、页面空白。

修复方式 #

所有组件引入路径的大小写和实际文件名完全匹配，建议统一组件文件为大驼峰命名规范，引入时一一对应。

4. 排查BootstrapVue注册与静态资源拼写问题 #

你的main.js中仅导入了bootstrap和bootstrap-vue的包，没有全局注册BootstrapVue：

// 现有不完整写法
import 'bootstrap'
import 'bootstrap-vue'

如果组件中用到BootstrapVue的自定义组件（比如<b-dropdown>这类），未注册时会触发运行时渲染错误，中断页面渲染。另外你在App.vue中引入的css文件写为./assets/boostrap.css，存在拼写错误（正确拼写为bootstrap，少了字母t），也可同步核对路径是否正确。

修复方式 #

补全BootstrapVue的注册和样式引入：

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

快速定位技巧 #

打开生产环境页面的浏览器控制台（按F12唤起），直接看两个面板的提示即可快速锁定问题：

• Console面板报组件找不到、属性读取错误：对应检查组件引入路径、注册逻辑
• Network面板报静态资源、页面404：对应检查history模式配置、资源部署路径
• Console面板报自定义元素未识别：对应检查组件是否正确注册

内容的提问来源于stack exchange，提问作者Bin Chảnh Kún