Vuex+Axios模拟多JSON数据加载时内容被覆盖问题求助

看起来你遇到的问题核心是本地开发服务器对带查询参数的静态文件请求解析逻辑不符合预期——虽然浏览器Network面板显示的URL正确，但服务器忽略了查询参数，错误匹配了其他静态文件。下面是几个能让你把所有JSON文件放在同一文件夹的解决方案：

原因分析 #

本地静态文件服务器（比如webpack-dev-server、http-server这类）通常只会解析URL的路径部分（也就是?之前的内容），而忽略查询参数。你的原始请求URL是server/chartsCollection?platform=${platform}&content=${content}.json，服务器只会尝试查找server/chartsCollection这个文件/文件夹，而不会把查询参数里的.json后缀当作文件名的一部分，这就导致了请求被错误路由到了其他匹配的文件。

而把文件放到独立文件夹后，路径变成了server/${platform}/chartsCollection，每个平台的路径唯一，服务器能精准匹配到对应文件，所以问题消失。

解决方案一：调整URL构造，把文件名直接放入路径 #

最直接的办法是把JSON文件名作为路径的一部分，而不是放在查询参数里，这样服务器能精准匹配到文件：

function fetchChartsData(platform, content) { 
  // 将content对应的文件名直接整合到路径中，查询参数仅保留平台标识
  const url = `server/chartsCollection_${content}.json?platform=${platform}`; 
  axios 
    .get(url) 
    .then(response => (console.log(response.data))) 
    .catch(error => console.error('fails:', error)); 
}

对应的，你需要把JSON文件命名为chartsCollection_content1.json、chartsCollection_content2.json这种格式，放在server文件夹下即可。

解决方案二：自定义开发服务器的路由解析规则 #

如果想保留原有的URL结构（用查询参数指定文件），可以通过配置开发服务器，让它根据查询参数来返回对应的JSON文件。以Vue项目常用的vue.config.js为例：

const path = require('path');

module.exports = {
  devServer: {
    before(app) {
      // 拦截/server/chartsCollection的GET请求
      app.get('/server/chartsCollection', (req, res) => {
        // 从查询参数中提取content值
        const { content } = req.query;
        if (!content) {
          return res.status(400).send('Missing content parameter');
        }
        // 拼接正确的JSON文件路径
        const filePath = path.join(__dirname, 'server', `${content}.json`);
        // 返回对应文件
        res.sendFile(filePath);
      });
    }
  }
};

这样服务器会根据content参数的值，精准返回server文件夹下对应的JSON文件，同时保留platform查询参数用于业务逻辑。

解决方案三：检查服务器的静态文件匹配规则 #

还有几个小细节需要确认：

• 确保server文件夹里没有名为chartsCollection的无后缀文件或文件夹，否则服务器会优先匹配这个资源，而不是根据查询参数找对应的.json文件
• 重启开发服务器，彻底清除服务器端的缓存（有些开发服务器会缓存静态资源，即使浏览器禁用了缓存也可能生效）
• 如果使用其他静态文件服务器（比如http-server），可以添加参数让它不忽略查询参数，或者调整路由匹配优先级

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