Vue Router历史模式下使用props访问/user/:id页面出现空白页

1. 修正前端资源路径配置 #

访问/user/id出现空白的核心原因是静态资源加载路径错误：当路由为嵌套路径时，相对路径的资源会以/user/为基准请求，导致找不到实际存放在根目录下的js、css等文件。

• 若使用Vue CLI，在vue.config.js中配置绝对路径：

module.exports = {
  publicPath: '/'
}

• 若使用Vite，在vite.config.js中配置：

export default {
  base: '/'
}

2. 优化Express fallback路由配置 #

确保所有非静态资源请求都正确返回index.html，同时避免路径解析异常：

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

// 静态资源服务，可添加缓存策略优化性能
app.use(express.static(path.join(__dirname, 'dist'), {
  maxAge: '1d',
  etag: false
}));

// 捕获所有GET请求，返回前端入口文件
app.get('*', function(req, res) {
  // 使用path.resolve生成绝对路径，避免相对路径解析错误
  res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 443;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

3. 验证与缓存清理 #

• 重新构建前端项目，将产物替换到dist目录
• 清除浏览器缓存后访问/user/id，此时页面应正常加载，id参数也会通过props正确传递给UserProfile组件

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