Vue.js 本身不直接解析 XML，但可以通过 axios 请求 XML 文件，并借助浏览器原生的 DOMParser 将响应文本转换为可操作的 XML 文档对象（Document），再提取数据绑定到 Vue 实例中显示。
1. 使用 axios 请求 XML 并设置响应类型
默认情况下 axios 将响应当作 JSON 处理，请求 XML 时需显式指定 responseType: 'text'，避免自动解析失败：
axios.get('/data.xml', {
responseType: 'text' // 关键：确保拿到原始字符串
})
.then(response => {
const xmlText = response.data;
// 后续用 DOMParser 解析
});2. 用 DOMParser 解析 XML 字符串
浏览器内置的 DOMParser 可将 XML 字符串转为标准的 XML 文
档对象，支持 querySelector、getElementsByTagName 等操作：
- 创建解析器：
const parser = new DOMParser(); - 解析 XML：
const xmlDoc = parser.parseFromString(xmlText, 'application/xml'); - 检查错误（可选）：
if (xmlDoc.querySelector('parsererror')) { /* 解析失败 */ }
3. 提取数据并绑定到 Vue 响应式状态
从 xmlDoc 中读取节点内容，赋值给 Vue 的 data 或 ref/reactive。例如 XML 如下：
Vue 入门 张三XML 实战 李四
在 Vue 3 Composition API 中可这样处理：
const books = ref([]);
onMounted(async () => {
try {
const res = await axios.get('/books.xml', { responseType: 'text' });
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(res.data, 'application/xml');
if (xmlDoc.querySelector('parsererror')) {
console.error('XML 解析错误');
return;
}
const bookNodes = xmlDoc.querySelectorAll('book');
books.value = Array.from(bookNodes).map(node => ({
title: node.querySelector('title')?.textContent || '',
author: node.querySelector('author')?.textContent || ''
}));} catch (e) {
console.error('加载失败', e);
}
});
4. 在模板中安全显示 XML 数据
使用 v-for 渲染列表，注意对可能为空的字段做兜底（如 {{ book.title || '未知标题' }}）。避免直接插入未转义的 XML 内容到 v-html，除非确认内容可信且已过滤 XSS 风险。
若需保留原始 XML 结构展示（如调试），可用 {{ xmlString }}white-space: pre-wrap 样式保持换行缩进。
