Vue.js如何无需组件直接通过URL返回JSON文件内容？

方案1：开发环境（Vue CLI）直接拦截请求 #

在vue.config.js中配置devServer的before钩子，直接拦截目标URL并返回JSON文件内容，完全绕过Vue路由和组件：

const fs = require('fs')
const path = require('path')

module.exports = {
  devServer: {
    before(app) {
      app.get('/test', (req, res) => {
        // 替换为你的JSON文件实际路径
        const jsonFilePath = path.resolve(__dirname, 'src/components/xyz.json')
        const jsonContent = fs.readFileSync(jsonFilePath, 'utf8')
        res.setHeader('Content-Type', 'application/json')
        res.send(jsonContent)
      })
    }
  }
}

配置后访问http://localhost:8080/test，浏览器会直接收到JSON响应。

方案2：生产环境服务器映射 #

部署到生产环境时，直接通过服务器配置将目标URL指向JSON文件，以Nginx为例：

location /test {
  # 替换为你的JSON文件在服务器上的实际路径
  alias /usr/share/nginx/html/xyz.json;
  add_header Content-Type application/json;
}

这样用户访问/test时，服务器直接返回JSON文件，无需经过Vue应用处理。

方案3：纯前端路由模拟（客户端实现） #

如果必须在Vue Router内处理，可使用beforeEnter导航守卫，无需组件：

const routes = [
  {
    path: '/test',
    beforeEnter: (to, from, next) => {
      import('../components/xyz.json').then(({ default: jsonData }) => {
        // 将JSON转为Blob并让浏览器下载/显示
        const blob = new Blob([JSON.stringify(jsonData)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        window.location.href = url
        // 终止路由导航，避免加载任何组件
        next(false)
      })
    }
  }
]

注：此方案是客户端模拟行为，浏览器会触发JSON文件的下载/预览，而非直接返回HTTP响应。

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