在Vue.js中消费RSS需将XML转JSON，通过rss2json等服务获取数据，在mounted中用fetch请求并赋值给articles，再用v-for渲染列表，注意处理跨域、XSS风险及日期格式化。
在Vue.js项目中消费RSS API并渲染列表，关键在于将RSS这种XML格式的数据转换为JSON结构，以便在前端方便地处理和展示。由于浏览器无法直接解析RSS（XML），我们需要借助第三方服务或后端代理将RSS源转换为可读的JSON格式。
使用RSS转JSON服务
常见的做法是使用如 rss2json.com 这样的免费API服务，它能将任意RSS地址转换为JSON响应。例如：
https://api.rss2json.com/v1/api.json?rss_url=YOUR_RSS_URL在Vue组件中，你可以通过axios或fetch请求该接口获取数据。
创建新闻列表组件
在Vue中发起请求并渲染结果的基本流程如下：
立即学习“前端免费学习笔记（深入）”；
- 在
data()中定义一个数组用于存储新闻条目 - 在
mounted()钩子中调用API获取数据 - 将返回的
items字段赋值给本地数据 - 使用
v-for指令遍历并渲染每条新闻
示例代码：
<font>
export default {
data() {
return {
articles: []
}
},
async mounted() {
const response = await fetch(
'https://api.rss2json.com/v1/api.json?rss_url=https://example.com/feed'
)
const result = await response.json()
if (result.status === 'ok') {
this.articles = result.items
}
}
}
</font>
模板部分：
<font>
<div v-for="item in articles" :key="item.guid">
<h3>{{ item.title }}</h3>
<p>{{ item.pubDate }}</p>
<div v-html="item.description"></div>
<a :href="item.link" target="_blank">阅读原文</a>
</div>
</font>
处理常见问题
RSS数据通常包含HTML内容，注意以下几点：
- 使用
v-html渲染描述内容时要确保来源可信，避免XSS风险 - 某些RSS源可能被跨域策略阻止，务必使用支持CORS的转换服务
- 考虑添加加载状态和错误提示提升用户体验
- 对日期字段进行格式化处理，例如用
new Date(item.pubDate)转换
