SPA中page.js路由刷新页面URL错误的配置咨询

问题根源 #

1. SPA路由刷新 fallback 缺失：刷新带子路由的URL（如/albums/xxx）时，Lite-server默认会将该路径视为静态资源路径尝试读取，而非返回SPA入口index.html，导致后续资源（如app.js）的相对路径请求基准变为/albums/，出现/albums/src/app.js这类错误路径。
2. API请求路径/代理配置问题：若前端API请求使用相对路径，刷新后请求基准随URL变化，加上未配置代理转发，会导致请求错误发送到Lite-server的3000端口而非数据库服务器的3030端口。

解决方案 #

1. 配置Lite-server的SPA路由 fallback 与API代理 #

修改项目根目录下的bs-config.json（无则新建），添加路由 fallback 中间件并配置API转发：

{
  "server": {
    "baseDir": "./",
    "routes": {
      "/data": "http://localhost:3030/data"
    },
    "middleware": {
      1: require('connect-history-api-fallback')({
        index: '/index.html',
        verbose: false
      })
    }
  },
  "port": 3000
}

• connect-history-api-fallback：强制所有路由请求返回index.html，解决刷新时的路由匹配问题。
• routes配置：将所有以/data开头的请求转发到http://localhost:3030/data，确保API请求正确指向数据库服务器。

2. 修正前端资源引用路径 #

所有静态资源（如app.js、CSS文件）需使用绝对路径引用，避免相对路径带来的基准错误：

• 错误写法：<script src="./src/app.js"></script>
• 正确写法：<script src="/src/app.js"></script>

3. 统一API请求路径 #

• 若前端原本使用完整URL请求API（如http://localhost:3030/data/albums/xxx），保持该写法即可；
• 若使用相对路径，改为以/data开头的绝对路径（如/data/albums/xxx），结合代理配置会自动转发到3030端口。

验证 #

重启Lite-server后，刷新http://localhost:3000/albums/xxx页面：

• 服务器会返回index.html，正确加载/src/app.js；
• API请求会通过代理转发到http://localhost:3030/data/albums/xxx，获取正确数据。

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