如何在Next.js 12应用中处理Windows "C:" URI？

架构老林

2026-7-19

解决Next.js 12 npm run build && next export 中c: URI处理错误

问题原因

你的代码中存在直接使用c:/xxx这类Windows盘符绝对路径引用资源（图片、字体、静态文件等）的情况，Webpack默认仅支持data:和file: URI格式，无法识别c:开头的路径协议，导致构建报错。

修复方案

1. 替换盘符路径为规范引用（优先推荐）

检查所有资源引用位置，将盘符路径改为符合Next.js规范的路径：

项目public目录下的资源：直接使用根路径引用，比如/images/logo.png
组件或页面目录下的本地资源：使用相对路径，比如./assets/icon.svg
示例：将import img from 'c:/my-project/public/banner.png'改为import img from '../public/banner.png'，或在组件中用<img src="/banner.png" />

2. 保留盘符路径时，通过next.config.js配置Webpack处理

如果必须保留Windows盘符路径，可在next.config.js中自定义Webpack规则，将c:路径转换为Webpack可识别的格式：

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      // 匹配常见资源文件后缀
      test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/i,
      issuer: { not: [/\.(css|scss|sass)$/i] },
      use: [
        {
          loader: 'url-loader',
          options: {
            publicPath: '/_next',
            name: 'static/media/[name].[hash:8].[ext]',
            // 转换c:路径为file:协议
            preprocess: (url) => {
              if (url.startsWith('c:')) {
                return `file:///${url.replace(/\\/g, '/')}`;
              }
              return url;
            },
          },
        },
      ],
    });
    return config;
  },
};