如何在Vue组件中导入本地XML文件？遇404及Loader报错求助

我来帮你搞定这两个Vue项目里导入sitemap.xml的问题，分情况给你解决方案：

一、解决axios请求404的问题 #

你遇到的404错误大概率是资源路径配置不对。在Vue项目里，静态资源的访问规则是这样的：

• 如果你用的是Vue CLI 3及以上版本，静态资源要放在public文件夹下，访问时必须用根路径开头（比如/sitemap.xml），因为打包后public里的文件会直接输出到项目根目录。
• 要是你还在用Vue CLI 2，静态资源放在static文件夹，访问路径同样得是根路径开头（/sitemap.xml），而不是你之前写的static/sitemap.xml。

另外你之前的代码还有个小问题：最后那个then(console.log(this.paths))里的this指向不对，而且会在请求还没完成就执行，得把日志移到解析成功的回调里。修改后的代码如下：

import axios from "axios";
var parseString = require("xml2js").parseString;
export default {
  data() {
    return {
      paths: [],
    };
  },
  mounted() {
    axios
      .get("/sitemap.xml") // 改成根路径访问
      .then((response) => {
        parseString(response.data, (err, result) => {
          if (!err) {
            this.paths = result;
            console.log(this.paths); // 移到这里确保请求完成后再打印
          } else {
            console.error("XML解析出错：", err);
          }
        });
      })
      .catch((error) => console.error("请求资源失败：", error));
  },
};

二、解决直接import XML文件的Loader错误 #

当你直接用import sitemap from "../static/sitemap.xml"时，Webpack默认不知道怎么处理XML文件，所以需要配置对应的loader来解析它，这里给你两种可行方案：

方案1：用raw-loader获取XML字符串后解析 #

先安装raw-loader：

npm install raw-loader --save-dev
# 或者用yarn
yarn add raw-loader --dev

然后在项目根目录的vue.config.js里（没有的话就新建一个）添加Webpack规则：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.xml$/,
          use: ['raw-loader']
        }
      ]
    }
  }
}

之后就能正常import并解析了：

var parseString = require("xml2js").parseString;
import sitemapXml from "../public/sitemap.xml"; // 路径对应你的文件位置

export default {
  data() {
    return {
      paths: [],
    };
  },
  mounted() {
    parseString(sitemapXml, (err, result) => {
      if (!err) {
        this.paths = result;
        console.log(this.paths);
      } else {
        console.error("XML解析出错：", err);
      }
    });
  },
};

方案2：用xml-loader直接把XML转成JSON #

安装xml-loader：

npm install xml-loader --save-dev
# 或者yarn
yarn add xml-loader --dev

同样在vue.config.js里配置规则：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.xml$/,
          use: ['xml-loader']
        }
      ]
    }
  }
}

这时候import会直接得到解析好的JSON对象，不需要再用xml2js处理：

import sitemap from "../public/sitemap.xml";

export default {
  data() {
    return {
      paths: [],
    };
  },
  mounted() {
    this.paths = sitemap;
    console.log(this.paths);
  },
};

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