基于Node后端的Vue应用Windows本地仅首页可渲染，生产及Mac环境正常

前置问题答复 #

• 之前通过Chocolatey解决的windows-build-tools、Python缺失问题和当前空白页无关：这类依赖是编译原生Node模块所需，你现在应用可以正常启动、根路径可正常渲染，说明编译环节已全部完成，不存在这类依赖缺失的问题。
• Node版本高于项目指定版本基本不会引发该问题：Node版本不兼容通常会导致应用启动失败、编译报错等问题，不会出现仅非根路由空白的特异性表现。

可能的故障原因 #

1. 后端路由回退配置不兼容Windows路径规则 #

你的Vue项目大概率开启了history路由模式，生产环境通过node app.js托管dist静态资源时，需要配置所有路由请求都回退返回index.html才能正常渲染前端路由。Windows和Mac/Linux的路径分隔符不同（Windows为\，类Unix系统为/），如果你的app.js中硬编码了路径分隔符，或者仅配置了根路径返回index.html，就会导致非根路径无法命中回退规则，返回空白页。

2. 静态资源路径大小写不匹配 #

Mac默认的APFS文件系统大小写不敏感，而Webpack在Windows环境下编译时对路径大小写的校验更严格。如果你的路由组件import路径大小写和实际文件名不一致，或者Vue Router的路径配置和组件路径大小写存在差异，Mac下可以正常加载组件，Windows下会出现组件加载失败的问题，导致路由页空白。

3. 打包路径配置错误 #

检查vue.config.js中的publicPath配置、Vue Router的base配置，如果配置了非根路径的前缀，或者使用了硬编码的路径拼接逻辑，Windows下可能会出现路径解析错误，导致非根路由无法正确加载对应的JS/CSS资源，出现空白页。

4. postinstall脚本执行异常 #

根目录的postinstall脚本中使用了cd client && npm run build的逻辑，Windows下如果项目路径存在中文、空格等特殊字符，或者脚本执行权限有问题，可能导致打包产物不完整，非根路由需要的按需加载chunk缺失，加载失败出现空白。

排查步骤 #

• 打开浏览器F12控制台，先看Console标签是否有JS报错，再看Network标签是否有JS/CSS资源返回404，可快速定位是资源加载问题还是组件渲染问题。
• 检查app.js的静态资源托管逻辑，使用Node原生的path.resolve方法拼接路径，不要硬编码斜杠，示例配置（以Express为例）：

const express = require('express')
const path = require('path')
const app = express()

// 托管静态资源
app.use(express.static(path.resolve(__dirname, 'client/dist')))
// 所有路由回退到index.html，必须放在静态资源托管之后
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client/dist', 'index.html'))
})

• 本地执行npm run dev启动开发环境测试，如果开发环境下非根路由可以正常访问，说明问题出在生产打包或后端托管配置环节。
• 检查所有路由组件的导入路径，保证大小写和实际文件名完全一致。

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