Vue3使用raw-loader导入.md文件报依赖未找到错误如何解决？

安全阿岳

2026-10-1

解决方案

修改导入语句
你已经在vue.config.js中全局配置了.md文件使用raw-loader处理，不需要再在import路径中添加!raw-loader!内联loader前缀，直接调整导入代码为：

import test from "./assets/test.md";

内联loader前缀会强制跳过全局配置的规则，触发异常的路径解析逻辑，是本次报错的核心原因。

排查其他可能的异常点

确认raw-loader已安装
如果没有安装依赖，执行以下命令安装开发依赖：

npm install raw-loader --save-dev

核对文件路径正确性
你当前写的./assets/test.md是相对于导入文件（HelloWorld.vue）的相对路径：如果你的assets目录存放在src根目录下，HelloWorld.vue存放在src/components目录下，正确的相对路径应为../assets/test.md，路径不匹配会直接触发依赖未找到报错。
重启开发服务器
修改vue.config.js配置后必须重启npm run serve进程，新的webpack规则才会生效。
解决规则冲突（可选）
如果调整后仍存在loader规则冲突，可以修改vue.config.js配置，添加type声明避免和其他默认规则冲突：

module.exports = {
    chainWebpack: (config) => {
        config.module
            .rule("raw")
            .test(/\.md$/)
            .type('javascript/auto')
            .use("raw-loader")
            .loader("raw-loader")
            .end();
    },
};