Vue3 SPA如何创建返回image/png类型的动态图片路由？

不行，仅靠Vue.js无法实现这个需求，原因如下：

• Vue是前端框架，运行在浏览器客户端，你的SPA用的是hash模式路由（URL里带#），这种模式下，#后面的路径部分不会被浏览器发送到服务器。用户访问https://website.com/#/dynamic-img时，服务器只会收到https://website.com/的请求，返回的是SPA的主HTML文件，HTTP响应的Content-Type已经是text/html了，Vue只是在客户端解析hash路径渲染对应组件，这时候根本没法修改已经完成的HTTP响应类型和内容。

• 即便换成history模式（去掉#），Vue的前端路由依然依赖服务器返回SPA主页面，组件还是在客户端渲染，同样没法让服务器返回image/png类型的响应——因为路由对应的请求还是会被服务器导向SPA入口，响应已经确定是HTML了。

如果想实现类似需求，不用网页抓取的话，可以用这些Vue端的替代方案：

• 在DrawChart组件中，生成图表后（比如用ECharts、Chart.js等库），调用对应库的导出图片API（比如ECharts的getDataURL()），把图表转为base64格式的图片，然后：
  • 直接在组件中渲染<img>标签展示这张图片
  • 生成下载链接，让用户手动下载图片
• 如果你确实需要访问该路径直接得到图片响应，必须配合后端或服务器配置：
  • 把/dynamic-img路径配置为后端接口，由后端生成图片并返回image/png响应
  • 或者在服务器层面将该路径的请求转发到能生成图片的服务

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