React项目部署构建失败：路径导入错误求助

问题分析 #

你遇到的两个错误本质都是路径解析逻辑问题：

1. 使用以/开头的绝对路径时，Create React App会将其解析为系统根目录，而非项目的src目录，所以即使文件实际在src目录内，也会被判定为超出允许范围。
2. 直接写src/assets/xxx.png时，webpack默认会从当前文件所在目录（src/Components/Footer）出发查找，而非项目根目录，自然找不到目标文件。

解决方案 #

方法1：使用相对路径（最直接，无需额外配置） #

从当前文件Footer.js的位置出发，通过../逐级回到上层目录，直到到达src，再进入assets目录。修改后的导入代码如下：

import React from "react";
import "./Footer.css"; // 同目录下的CSS可直接简写
import facebook from "../../assets/facebook.png"; 
import instagram from "../../assets/instagram.png"; 
import linkedin from "../../assets/linkedin.png"; 
import twitter from "../../assets/twitter.png";

• ../../assets的含义：第一个../从Footer目录回到Components，第二个../从Components回到src，再进入assets目录。

方法2：配置根路径别名（避免冗长的相对路径） #

如果不想反复写../，可以给src目录配置别名，让webpack直接识别根路径导入。以使用craco为例：

1. 安装依赖：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加如下配置：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      'src': path.resolve(__dirname, 'src/')
    }
  }
};

3. 修改package.json里的启动/构建命令，替换react-scripts为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

4. 现在即可用别名直接导入：

import facebook from "@/assets/facebook.png";
// 或者
import facebook from "src/assets/facebook.png";

关于symlinks的说明 #

部署服务提到的symlinks（符号链接）本质是系统级快捷方式，用于关联不同目录的文件，但你的问题核心是代码路径解析错误，用上面两种方法就能解决，无需依赖symlinks。如果后续部署环境有特殊要求，再考虑创建符号链接即可。

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